如何在不垂直滚动页眉的情况下让DIV 100%的浏览器高度 [英] How can I make DIV 100% height of browser without vertical scrolling of header
问题描述
左侧和右侧面板的高度均为100%,但由于标题 div占用X空间量,因此我想在窗口中进行一些垂直滚动操作。
如何删除垂直滚动?
JSFiddle: http://jsfiddle.net/G7unG/1/
CSS和HTML
html,body {height:100%; margin:0;}。header {background:#333;填充:15px;文本对齐:中心; font-size:18px; font-family:sans-serif;颜色:#FFF;}。leftpanel,.rightpanel {height:100%;}。leftpanel {float:left;宽度:70%;背景:#CCC;}。rightpanel {float:left;宽度:30%;背景:#666;}
< div class =头文件>头文件< / div>< div class =leftpanel>左面板< / div>< div class =rightpanel>右面板< / div>< div class =clearfix> ;< / div>
这是一个使用flexbox的现代化解决方案。无论标题的高度如何,其余元素都将垂直拉伸以填充剩余空间。这里是小提琴: http://jsfiddle.net/mggLY/1/ 。
HTML:
< div id =wrapper>
< div class =header>标头< / div>
< div>
< div class =leftpanel>左侧面板< / div>
< div class =rightpanel>右侧面板< / div>
< / div>
< / div>
CSS:
* {
margin:0;
padding:0;
border:0;
}
html,body {
height:100%;
}
.header {
background:#333;
padding:15px;
text-align:center;
font-size:18px;
font-family:sans-serif;
颜色:#fff;
}
.leftpanel {
background:#CCC;
}
.rightpanel {
background:#666;
}
#wrapper {
height:100%;
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
大纲:1px纯红色;
}
#wrapper> .header {
-webkit-flex:0 0 auto;
flex:0 0 auto;
}
#wrapper> .header + div {
-webkit-flex:1 1 auto;
flex:1 1 auto;
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
}
#wrapper> .header + div> div:first-of-type {
-webkit-flex:7 0 0;
flex:7 0 0;
}
#wrapper> .header + div> div:last-of-type {
-webkit-flex:3 0 0;
flex:3 0 0;
}
Both the left and right panels have a height of 100%, but since the Header div takes up X amount of space, there is some vertical scrolling in the window that I want to get rid of.
How can I remove that vertical scrolling?
JSFiddle: http://jsfiddle.net/G7unG/1/
CSS and HTML
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
}
.leftpanel, .rightpanel{
height: 100%;
}
.leftpanel{
float: left;
width: 70%;
background: #CCC;
}
.rightpanel{
float: left;
width: 30%;
background: #666;
}
<div class="header">Header</div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
<div class="clearfix"></div>
Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/.
HTML:
<div id = "wrapper">
<div class="header">Header</div>
<div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #fff;
}
.leftpanel{
background: #CCC;
}
.rightpanel{
background: #666;
}
#wrapper {
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
outline: 1px solid red;
}
#wrapper > .header {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#wrapper > .header + div {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#wrapper > .header + div > div:first-of-type {
-webkit-flex: 7 0 0;
flex: 7 0 0;
}
#wrapper > .header + div > div:last-of-type {
-webkit-flex: 3 0 0;
flex: 3 0 0;
}
这篇关于如何在不垂直滚动页眉的情况下让DIV 100%的浏览器高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!