使用導航欄在視口中使3列等高

Question

我有一個70px的導航欄，在導航欄下，我會彼此堆疊3列。 我試圖找出一種使列都相等的高度的方法。 基本上像這樣：

height: calc((100vh-70px)/3);

我認為這行不通，有沒有類似的解決方案？

 <nav>
   <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
   </ul>
 </nav>

 <div id="workTop">
     <div class="one_third column workSquare"></div>
      <div class="one_third column workSquare2"></div>
      <div class="one_third column workSquare"></div>
 </div>

Answer 1

如果您希望它具有響應能力，則可以使用媒體查詢來說明不同的屏幕尺寸。 或者，使用Bootstrap或其他網格系統。

如果您的目標是在屏幕更改大小時更改列的大小，則可以使用以下方法：

$(window).resize(function(){
    $('.column').css("height", $(window).height() / 3);
});

顯然，這並不能解釋資產凈值，但您知道了。

編輯：

@gyre指出我們應該關注CSS，因此這是一個擴展的選項。

如果希望各列始終從頂部延伸到底部，則可以使用百分比，並將它們與媒體查詢混合，以近似估計各個大小之間的所需平衡。 例如：

@media screen and (max-width: 480px){
    .column{
        height: 85%;
    }
}
@media screen and (max-width: 780px){
    .column{
        height: 95%;
     }
}  

但是，這只會使該列占父元素的85％。 因此，您應該考慮到這一點。

Answer 2

calc（）應該可以滿足您的需求，請注意calc（）docs +和-運算符必須由空格包圍。

注意： +和-運算符必須始終被空格包圍。 例如，calc（50％-8px）的操作數將被解析為百分比，然后是負長度，一個無效的表達式，而calc（50％-8px）的操作數將是一個百分比，后跟一個負號和一個長度。 更進一步，將calc（8px + -50％）視為長度，后跟加號和負百分比。 *和/運算符不需要空格，但是允許添加空格以保持一致性，因此建議使用。

所以把你的身高改為

height: calc((100vh - 70px)/3);