[英]How to make a second div fill the remaining height of the screen without scrollbar?
I have 2 divs: the first has 100px height, and the second I want to fill the remaining of the screen without having vertical scrollbars. 我有2个div:第一个div具有100px的高度,第二个我想填充屏幕的其余部分而没有垂直滚动条。 I tried to set the second divs height to 100%, but the scrollbar appeared.
我试图将第二个divs高度设置为100%,但是出现了滚动条。
<html>
<body>
<div class="wihe100">
<div class="firstDiv">
AAA
</div>
<div class="wihe100 redBack">
BBB
</div>
</div>
</body>
</html>
html, body
{
height:100%;
margin: 0px;
}
.wihe100
{
width: 100%;
height: 100%;
}
.redBack
{
background-color: #FF0000;
}
.firstDiv
{
height: 100px;
background-color: #0000FF;
}
Here is a JSFiddle: http://jsfiddle.net/wHtX7/1/ 这是一个JSFiddle: http : //jsfiddle.net/wHtX7/1/
Option1: Give red background to body itself. 选项1:为主体本身提供红色背景。
html, body{
height:100%;
margin: 0px;
background-color: #FF0000;
}
.firstDiv{
height: 100px;
background-color: #0000FF;
}
Option 2: Set height of redBack
100% - 100px. 选项2:将
redBack
高度设置为100% redBack
。
HTML: HTML:
<div class="wihe100">
<div class="firstDiv">AAA</div>
<div class="redBack">BBB</div>
</div>
CSS: CSS:
html, body {
margin: 0px;
}
html, body,.wihe100 {
height:100%;
}
.redBack {
background-color: #FF0000;
height:calc(100% - 100px);
}
.firstDiv {
height: 100px;
background-color: #0000FF;
}
Use flexbox 使用flexbox
<html>
<body>
<div class="wihe100">
<div class="firstDiv">
AAA
</div>
<div class="wihe100 redBack">
BBB
</div>
</div>
</body>
</html>
- -
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wihe100 {
display: flex;
height: 100vh;
flex-direction: column;
}
.firstDiv {
background-color: red;
height: 100px;
}
.redBack {
background-color: blue;
flex: 1;
}
I think by adding 我认为通过添加
overflow-y:hidden;
to your .wihe100 class will help. 对您的.wihe100类将有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.