CSS导航-没有Flex的方式

Question

下面的示例是否可以在不display: flex;情况下实现 display: flex; 和flex: 1 0 0; ？

如何将.navigation高度设置为100％但自动减去SignOut的高度？ 我已经尝试过calc（100％-SignOutHeight），但是SignOutHeight可以是动态的...仅flex模型提供此选项或存在其他方式？

jsfiddle

https://jsfiddle.net/Lny303nh/3/

  body { margin: 0; } * { box-sizing: border-box; } .experiment { background: #f00; display: flex; flex-direction: column; height: 100%; padding-bottom: 16px; padding-top: 16px; position: fixed; width: 320px; } .navigation { flex: 1 0 0; overflow: auto; } .navigation__links { padding-left: 16px; padding-right: 16px; } .navigation__link { background: #f00; color: #fff; padding: 16px; } .navigation__link_active { background: #fff; color: #000; } 

  <div class="experiment"> <div class="navigation"> <div class="navigation__links"> <div class="navigation__link"> Name </div> <div class="navigation__link"> Sign In </div> <div class="navigation__link navigation__link_active"> Sign Up </div> </div> </div> <div class="navigation__links"> <div class="navigation__link"> Sign Out </div> </div> </div> 

Answer 1

这是一个按要求使用CSS float的示例，使用％宽度，以便响应。 如果要像图像一样垂直放置它们，只需移除float：left;即可。

 .navSection { float: left; width: 20%; } .navSection:nth-child(odd) { background-color: red; } .navSection:nth-child(even) { background-color: blue; } 

 <p class="navSection">Section 1</p> <p class="navSection">Section 2</p> <p class="navSection">Section 3</p> <p class="navSection">Section 4</p> <p class="navSection">Section 5</p>