html - 为什么 Header 下面的 Div 仍然溢出?

标签 html css

我正在尝试创建一个 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%,这里是站点 bodybody高度为 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>

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

关于html - 为什么 Header 下面的 Div 仍然溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28136050/

相关文章:

css - 在 angular 的 css 文件中将 flex 作为属性或类实现有什么区别吗?

javascript - 无法在 Safari 中使用 javascript 更改网站图标

css - 嵌入 HTML YouTube 视频;显示不正确

javascript - 如何使移动网站像 Linkedin 移动收件箱一样工作?

jquery - 动态宽度和 FitText 插件

jquery - 仅在 Firefox 中使用 Jquery 的动画切换

html - 浏览器调整大小时,下拉菜单不会保持居中

javascript - 获取当前行号和列号

html - 正确的 HTML 语法 - 列表标记内加粗或粗体标记内加粗

html - CSS 多列布局 : <li> cut in half when uneven amount of users online