我脑子里有这个模板
我不知道如何实现第二个“弹性div”。它必须在屏幕上填充所有剩余空间的高度(不大,因为我不想看到y滚动)。有可能吗?
答案 0 :(得分:3)
viewport units
和calc
使这更加简单。
* {
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;
}