不带“calc”的CSS - div高度计算 [英] CSS - div height calculation without "calc"

问题描述

在我的网站，我使用两个div，应该有 height 像

因此，有一个 div code> height：90px; 是对齐到窗口的底部，现在如果我想要第二个div（红色）填充窗口的其余部分，我该怎么办？红色 div 应该具有窗口的 height 减去 height div ，但是像 calc（100vh - 90px）将无法工作，对吗？ >

谢谢！

解决方案

实际上 height：calc 100vh - 90px）; 确实工作

  html，body {min-height： 100％;} * {margin：0; padding：0;} footer {height：90px; background：blue;} main {background：red; height：calc（100vh  -  90px）;}  

  main>< / main>< footer>< / footer>  

但是，如果内容通常会导致垂直滚动，您希望这种反应如何反应并不完全清楚。

$ c>

  html，body {min-height：100％;} * {margin：0; padding：0;}。wrap {display：flex; flex-direction：column; flex-wrap：无包装; min-height：100vh;} main {background：red; flex：1;} footer {flex-basis：90px; flex-shrink：0; background：rgba（0，0，255，1）;}  

 < div class =wrap> < main> < div class =content>< / div> < / main> < footer> < / footer>< / div>  

In my website, I am using two divs that should have their height like in this picture.

So, there is a div with height:90px; that is aligned to the bottom of the window, now what can I do if I want the 2nd div (red) to "fill" the rest of the window? Red div should have the height of the window minus the height of the blue div but something like calc(100vh - 90px) wouldn't work, right?

Thanks!

解决方案

Actually height: calc(100vh - 90px); does work

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
footer {
  height: 90px;
  background: blue;
}
main {
  background: red;
  height: calc(100vh - 90px);
}

<main></main>
<footer></footer>

However, it's not entirely clear how you want this to react if the content would normally cause vertical scrolling. Then this is not the answer, probably.

Alternative solution with flex-box

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap:no-wrap;
  min-height:100vh;
}
main {
  background: red;
  flex:1;
}

footer {
  flex-basis:90px;
  flex-shrink:0;
  background: rgba(0, 0, 255, 1);
}

<div class="wrap">
  <main>
    <div class="content"></div>
  </main>
  <footer>
  </footer>
</div>

这篇关于不带“calc”的CSS - div高度计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！