css - CSS - 没有“计算”的 div 高度计算

Question

在我的网站中，我使用了两个 div，它们应该在这张图片中height有它们的样子。

因此，有一个div与height:90px;窗口底部对齐的 with，现在如果我希望第二个 div（红色）“填充”窗口的其余部分，我该怎么办？红色div应该height是窗口的 减去height蓝色的，div但类似的东西calc(100vh - 90px)不起作用，对吧？

谢谢！

Answer 1

实际上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>

但是，如果内容通常会导致垂直滚动，您希望它如何反应并不完全清楚。那么这可能不是答案。

替代解决方案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>

Answer 2

我不相信这可以在不使用 javascript 来获取窗口高度的情况下完成。

所以，我会使用一些 javascript 来获取窗口高度，然后相应地更改顶部元素的高度（假设是静态页脚）。

HTML

<div class="top" id="top">
</div>
<div class="bottom"> 
</div>

CSS

.top{
    background-color:red;
}
.bottom{
    height: 90px;
    background-color:blue;
}

Javascript

var h = window.innerHeight;
document.getElementById("top").style.height = (h - 90) + "px";

http://jsfiddle.net/n5aLt5y6/1/

Answer 3

假设你不能calc在你的项目中使用；请考虑使用以下 JavaScript 来设置第一个 div 的高度。

它是如何工作的：

• 第二个 DIV（页脚）使用简单的 CSS 从底部定位bottom:0;
• 当 windowload或resize.

https://jsbin.com/lunitafuja/1/edit?html，输出

<style>
    html, body {
        margin: 0;
        padding: 0;
    }

    #a {
        top: 0;
        position: absolute;
        background-color: red;
        width: 100vh;
    }

    #b {
        position: absolute;
        background-color: blue;
        width: 100vh;
        height: 100px;
        bottom: 0;
    }
</style>

<script>
    window.app = {
        start: function () {
            var bTop = Math.round(document.getElementById('b').getBoundingClientRect().top);
            var a = document.getElementById('a').style.height = bTop + 'px';

        }
    };

</script>