Question

在我的网站上，我使用了两个div，其height应该是in this picture。

所以，有一个div与height:90px;对齐到窗口的底部，现在如果我希望第二个div（红色）“填充”其余部分，我该怎么办？窗户？红色div应该让窗口的height减去蓝色height的{{1}}，但div之类的东西不起作用，对吗？

谢谢！

Answer 1

实际上height: calc(100vh - 90px); 工作

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用flex-box

的替代解决方案

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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;
当窗口load或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”

3 个答案: