1

我开始折腾一些 HTML 和 CSS，并决定制作一个布局，其中一个主 div 包含标题，一个内容和侧边栏 div，两者都是浮动的。这两者的边距和边框都是 2%。

除了页脚和页眉之外的所有内容都有 100% 的高度，但是，浮动 div 从主 div 的底部突出。

这是主 div 和两个浮动 div 的 CSS 代码：

.main {
clear: both;
background-color: rgb(32, 32, 32);
width: 85%;
margin: 0 auto 0 auto;
height: 100%;
}
.content {
float: left;
width: 66%;
height: 100%;
background-color: rgb(20, 20, 20);
padding: 2% 2% 2% 2%;
margin: 2% 0 2% 2%;
}

.sidebar-right {
width: 20%;
float: right;
height: 100%;
background-color: rgb(20, 20, 20);
padding: 2% 2% 2% 2%;
margin: 2% 2% 2% 2%;

我不确定我是否应该在此处插入完整代码（第一篇文章），所以我使用了 jsFiddle

如jsFiddle所示：http: //jsfiddle.net/Jess_Nielsen/ePM76/ 全屏版：http: //jsfiddle.net/Jess_Nielsen/ePM76/embedded/result/

我很确定我错过了一些小事情，但是在两次阅读了询问表中的建议之后，我希望你们中的一个人能找到解决方案。

注意：文本的像素稍后将被替换为 em。

4

2 回答 2

2

它看起来像这样的原因是由于一切height: 100%。

您的html, body,.main和.content都.sidebar-right设置为height: 100%解释布局的行为。 height是相对于父元素的显式高度，所以所有这些元素都等于 100% 的高度html。

这就是为什么.main不完全包含其所有后代div元素的原因 -具有与or.main相同的显式高度，但预计会保持,和垂直（例如 100% + 大约 200px 额外）。这就是它溢出的原因。您还为 100% 高度元素定义了边距和填充，这使它们具有更大的垂直高度，但父容器保持相同的大小，因为它也显式设置为..content.sidebar-right.mainheader.contentfooterheight: 100%

级联总是沿着 DOM 向下流动，从不向上流动。

于 2013-11-12T19:40:39.523 回答
0

这里有两件事。

您的标题在您的身体内，它正在将您的其他列向下推。

您的 .side-bar 元素上还有以下内容：

padding: 2% 2% 2% 2%;
margin: 2% 0 2% 2%;

这也导致它们显示在它的容器之外。

删除这两件事可确保包含您的侧边栏元素。

JSFiddle

您也可以尝试使用小于 100% 的高度：

JSFiddle(2)

于 2013-11-12T19:40:22.570 回答