CSS

Question

在我的网站中，我使用了两个 div，它们的 height 应该像 in this picture。

所以，有一个 div 和 height:90px; 对齐到 window 的底部，现在如果我想要第二个 div 我该怎么办（红色）到"fill"剩下的window？红色 div 应该有 window 的 height 减去蓝色 div 的 height 但是像 calc(100vh - 90px) 这样的东西不行，对吧？

谢谢！

Answer 1

我认为如果不使用 javascript 来获得 window 高度，就无法做到这一点。

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

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 2

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

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

的高度

它是如何工作的：

第二个 DIV（页脚）从底部简单地使用 CSS bottom:0;
当windowload或resize时，第一个DIV高度由JavaScript调整。

https://jsbin.com/lunitafuja/1/edit?html,output

<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>

CSS - div 没有 "calc" 的高度计算

CSS - div height calculation without "calc"

height

calc