0

我有一个关于如何设置我的基本流体布局的快速问题。我在顶部有一个 40 像素高、100% 宽的标题栏，这看起来很棒。

然后我有一个#left 和#right div，每个分别浮动。这看起来很酷。它们都有 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>

这有帮助吗:)

4

1 回答 1

1

height: 100%;对网页来说是一件棘手的事情，你无疑是敏锐地意识到的。查看您在 Firefox 3.5.7 中的代码，#sidebarand#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）。

希望这可以帮助！

于 2010-01-17T11:39:50.900 回答