Question

我正在尝试创建一个标题并使其下方的div为height：100％with overflow并且不使用overflow-y：hidden;命令。我以前完成了这个，但不再工作了。你应该能够在Left Div中垂直滚动，但身体内没有溢出。

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;
}

Answer 1

box-sizing:border-box;让你的div保持绝对大小不变（包括边距，边框和填充值），有效缩小框以包含div区域内的边距，填充和边框。

您的.left框高度为100％ - 这意味着它是其父元素的100％，这里是网站body，body高度是100％，其父高是寡妇大小

默认行为是为元素的高度和宽度添加边距，边框和填充值，因此其高度为100％+ margin-top + margin-bottom + padding-top + padding-bottom + border-top + border-bottom < / p>

因此，如果您添加2个高度为60px且100％的元素，则整个站点高度为100％寡妇高度+ 60px，这就是滚动出现的原因。

您还可以使用.left函数计算calc()高度

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>

http://jsfiddle.net/edcp1poc/5/

Answer 2

如果我找对你，你必须将溢出：滚动; 应用于.left类，并将溢出：隐藏; 应用于正文。

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;
    overflow: scroll;
}

body, html {
height: 100%;
overflow: hidden;
}

body {
padding:60px 0 0 0px; /* 60 — header height*/
margin:0;
}

小提琴：http://jsfiddle.net/undcg4oe/

Answer 3

好的我明白了，但我不明白为什么有人可以解释一下呢？

添加时似乎有效：

* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box; 
}

小提琴：http://jsfiddle.net/edcp1poc/4/

我已经更新了它，当它添加到CSS时，它可以正常工作，左边是高度100％，并根据窗口大小进行调整。有人可以解释一下吗？

在Header下面的Div仍然满溢为什么？

3 个答案: