左右两个面板高度均为100%,但是由于Header div占用了X个像素的空间,所以窗口中会出现一些垂直滚动条,我想要消除这种垂直滚动。
如何去除这个垂直滚动条?
JSFiddle: http://jsfiddle.net/G7unG/1/
CSS和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>
.leftPanel, .rightPanel
添加一些溢出规则,例如overflow: auto;
,以防止内容溢出框架并导致页面出现滚动条。 - Wish