使用导航栏在视口中使3列等高

Question

I have a nav bar that is 70px, under the nav bar I will have 3 columns stacked on top of each other. Im trying to figure out a way to make the columns all of equal height. Basically something like:

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

I don't think this works, any solutions similar to this?

 <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

If you want it to be responsive then you can use media queries to account for different screen sizes. Or, use Bootstrap or some other grid system.

If your goal is to change the size of the columns when the screen changes size then you can use something like:

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

Obviously this doesn't account for the nav but you get the idea.

Edit:

@gyre pointed out we should focus on CSS so here's an expanded option.

If you are wanting the columns to always stretch from the top to the bottom, then you can use percentages and mix them with media queries to approximate the desired balance across sizes. For example:

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

This will however, only make the column 85% of the parent element. So you should account for that.

Answer 2

calc() should work for what you are trying to do, note that by calc() docs + and - operators must be surrounded by whitespace.

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

so change your height to

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