我正在尝试创建一个 header ,并将其下方的 div 设置为 height:100% 并溢出,而不是使用 overflow-y:hidden; 命令。我以前完成过这个,但不再工作了。您应该能够在 Left Div 内垂直滚动,但不会在 body 内溢出。
fiddle http://jsfiddle.net/edcp1poc/
HTML
<div class="main">
<div class="header">Header</div>
</div>
<div class="left">Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div
</div>
CSS
.main {
background-color: #666666;
min-width:100%;
height:60px;
margin-top: -60px;
}
.left {
height: 100%;
width:300px;
border: 1px solid black;
margin-top: -60px;
}
body, html {
height: 100%
}
body {
padding:60px 0 0 0px; /* 60 — header height*/
margin:0;
}
最佳答案
box-sizing:border-box;
使您的 div
的绝对大小保持不变(包括边距、边框和填充值)有效地缩小框以包含边距,padding,borders 在 div
区域内。
您的 .left
框高度为 100% - 这意味着它是其父元素的 100%,这里是站点 body
和 body
高度为 100%,其父级高度为寡妇大小。
默认行为是为元素的高度和宽度添加边距、边框和填充值,因此它的高度为 100% + margin-top + margin-bottom + padding-top + padding-bottom + border-top + border-bottom
因此,如果您添加 2 个高度为 60px 且 100% 的元素,则整个网站的高度为 100% widow height + 60px,这就是出现滚动条的原因。
您还可以使用 calc()
函数计算 .left
高度
body, html {
height: 100%
}
body {
margin:0;
}
.main {
background-color: #666666;
min-width:100%;
height:60px;
}
.left {
height: calc(100% - 62px);
/*62px is .main height + .left 1px border-top + 1px border-bottom */
width:300px;
border: 1px solid black; /* additional 2px to width and height of this block */
float:left;
overflow-y: scroll;
}
/* or with box-sizing changed */
.left {
border: 1px solid black;
box-sizing: border-box;
float: left;
/* box model changed, just pass elements height */
height: calc(100% - 60px);
overflow-y: scroll;
width: 300px;
}
<div class="main">
<div class="header">Header</div>
</div>
<div class="left">Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div Left Div
</div>
关于html - 为什么 Header 下面的 Div 仍然溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28136050/