Question

我开始抛弃一些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替换。

Answer 1

看起来这是因为一切都是height: 100%。

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

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

级联总是沿着DOM向下流动，永远不会向上流动。

Answer 2

这里有两件事。

你的标题在你的身体内，它正在推动你的其他列。

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

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

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

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

JSFiddle

你也可以尝试使用低于100％的高度：

JSFiddle(2)

浮动div 100％不影响外部div

2 个答案: