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>