固定高度div +拉伸高度div = 100%屏幕高度。可能吗?

时间:2015-07-16 12:57:47

标签: html css

我脑子里有这个模板

enter image description here

我不知道如何实现第二个“弹性div”。它必须在屏幕上填充所有剩余空间的高度(不大,因为我不想看到y滚动)。有可能吗?

5 个答案:

答案 0 :(得分:3)

viewport unitscalc使这更加简单。

* {
  margin: 0;
  padding: 0;
}
.one {
  height: 50px; /* demo height */
  background: red;
}
.two {
  height: calc(100vh - 50px);
  background: blue;
}
<div class="one"></div>
<div class="two"></div>

编辑:Flexbox版本

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.one {
  height: 50px;
  background: red;
}
.two {
  background: blue;
  flex-grow: 1;
}
<div class="one"></div>
<div class="two"></div>

答案 1 :(得分:1)

查看此fiddle。希望它有所帮助!

HTML -

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS -

html, body {
    width:100%;
    height:100%;
    margin:0;
}
#wrapper {
    width:300px;
    height:100%;
    position:relative;
}
#first {
    width:300px;
    height:200px;
    background-color:#F5DEB3;
}
#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

答案 2 :(得分:0)

使用javascript窗口对象的resize事件。听到这个事件然后我们必须手动更新我们的可视元素(div..etc)。

答案 3 :(得分:0)

你说你想要一个“弹性”的第二个div,我的例子就是这个。

/conf/catalina.properties

第二个div必须包含内容或者不会被看到,但是它的高度将决定div内部的内容,因此它将根据需要拉伸。

答案 4 :(得分:0)

.div1{
height:400px;
z-index:1;
}

.div2{
height:100%;
position:relative;
top:-400px;
z-index:-1;
}