我有一个关于如何设置我的基本流体布局的快速问题。我在顶部有一个 40 像素高、100% 宽的标题栏，这看起来很棒。
然后我有一个#left 和#right div，分别 float 。这看起来很酷。它们都有 100% 的高度，效果很好，但问题是页面然后向下滚动 40px，因为标题栏有 40px...如果我对标题和内容框使用流畅的布局，它看起来会很糟糕在很小或很大的分辨率上。
有什么想法吗？
这是我的 CSS
body
{
background: #ebebeb;
margin: 0;
padding: 0;
min-width: 750px;
max-width: 1500px;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header
{
background: #414141;
height: 40px;
width: 100%;
}
#sidebar
{
width: 30%;
background: #ebebeb;
height: 100%;
float: left;
}
#rightcontent
{
width: 70%;
background: #fff;
height: 100%;
float: right;
}
#footer
{
width: 100%;
background: #414141;
height: 40px;
clear: both;
}
这是我的 html 页面:
<body>
<div id="wrap">
<div id="header">
head
</div>
<div id="sidebar">
side
</div>
<div id="rightcontent">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
这有帮助吗:)
最佳答案
height: 100%;对于网页来说是一件棘手的事情，你无疑敏锐地意识到这一点。查看您在 Firefox 3.5.7 中的代码 #sidebar和 #rightcontent列只有大约 em 的高度- 刚好可以容纳你放入其中的文字，而不是我认为你希望的整页长度。这些列试图根据其父级的显式高度计算百分比高度，但是 #wrap也有一个基于 % 的高度，这会导致它失败(至少在我的 Firefox 中)。
现在，正如您所描述的那样(列是正确的高度，除了额外的 40 像素滚动)似乎正在发生的事情是您使用的任何浏览器都超过了 #wrap 的完整高度。作为 它的 父级的 100%，即 <body> .很自然地，当您的列的大小调整到 <body> 的高度时，其中还包含页眉和页脚的高度，列太高了。
我曾多次使用一个技巧来实现列的全页长度外观，该技巧可适当缩放以适应任何页面尺寸，即粘贴 position: fixed; bottom: 0px;。 <div>我页面底部的标记，其中的标记足以模仿列的结构和相关 CSS。
为了获得这种效果，我对您的页面做了以下操作:
<!--Add this to your HTML-->
<div id='columnfooter'>
<div id='sidecont'></div>
<div id='rightcont'></div>
</div>
/* And modify your CSS like this */
#sidebar, div#sidecont {
width: 30%;
background: #ebebeb;
float: left;
}
#rightcontent, div#rightcont {
width: 70%;
background: #fff;
float: right;
}
div#rightcont, div#sidecont {
height:100%;
}
#footer {
width: 100%;
background: #414141;
height: 40px;
position: relative;
bottom: 0px;
}
div#columnfooter {
position: fixed;
z-index: -25;
bottom: 40px;
height: 100%;
background: #ebebeb;
width: 100%;
}
是的，使用 HTML 以这种方式形成空背景列确实混合了语义和风格标记——这是技术上的禁忌。但是 CSS 显然是从 HTML 中抽象出来的，使用这段代码我有整页列，#footer在底部(即使超过一页的内容被添加到它上面的任一列)，并且它在最新版本的 Firefox、Safari、Opera、Chrome 和 IE8 中在任何分辨率下(测试到 800x600)都表现相同。
希望这对您有所帮助!
关于CSS 流体布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2079295/