3

我正在尝试建立一个基本三行的布局：页眉、内容和页脚 div。最外面的两个 div 的高度是固定的；中心 div 必须是流动的，并适应浏览器屏幕的高度。

布局示例

有人能指出我正确的方向如何用适当的 CSS 解决这个问题吗？现在我还没有对 javascript 解决方案感兴趣。 由于 CSS 没有提供明确的答案，因此 javascript 解决方案非常突出！

这是我走了多远：

<div id='header'>Header</div>
    <div id='content'>
        <div id='innerContent'>
            This is the fluid part
        </div>
    </div>
<div id='footer'>footer</div>

CSS：

#header {
    position:absolute;
    top:0px;
    left:0px;
    height:100px;
    z-index:5;
}
#content {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    z-index:2;
}
#innerContent {
    margin-top:100px;
    height:100%;
}
#footer {
    height:400px;
}
4

3 回答 3

4

编辑：对不起，我感到很尴尬。大约一年前我做了类似的事情，但起初我认为不可能将其调整到这种情况。显然是的。

正如我认为其他人已经说过的那样，可以通过绝对定位将页脚 div 放在底部。问题是当内容 div 变大时调整它的位置。由于页脚是绝对定位的，它不会跟随内容 div 的流动，即使内容扩展，它也会保持在同一个位置。

诀窍是将所有内容包装在绝对定位的 div 中。如果内容变大，它将扩展，并且页脚 div 将根据包装器的边框而不是文档的边框定位。

这是代码。尝试在内容 div 中放置一堆<br />标签，您会发现一切都在调整。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #wrapper {
        min-height: 100%;
        min-width: 100%;
        position: absolute;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        background-color: gray;
        margin-bottom: 50px;
    }

    #footer {
        height: 400px;
        min-width: 100%;
        position: absolute;
        bottom: 0px;
        margin-bottom: -350px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id='header'>Header</div>
        <div id='content'>
            Content

        </div>
        <div id='footer'>footer</div>
    </div>
</body>
</html>

原来的： 可悲的是，css 缺乏一种干净的方式来做到这一点。您不知道视口高度（称为 h），因此无法计算 h-100-50 您必须构建您的网站，以便大多数人会看到 50px 的页脚 div。这样做的方法是为内容 div 设置一个最小高度。

最小高度值必须从某个标准视口高度派生而来。谷歌实验室已经为他们的访问者发布了他们关于视口大小的数据，并在这里做了一个很好的可视化：http: //browsersize.googlelabs.com/

我为我自己的视口设计，它是 620px 高（根据 google ~80% 有这个视口高度）。因此，内容 div 的最小高度应为 620-100-50 = 470 像素。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        min-height: 470px;
        background-color: gray;
    }

    #footer {
        height: 400px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id='header'>Header</div>
    <div id='content'>
        Content
    </div>
    <div id='footer'>footer</div>
</body>
</html>
于 2012-04-15T01:11:46.427 回答
1

如果我正确理解您的问题，我认为这可能会引导您走向正确的方向。

http://jsfiddle.net/mikevoermans/r6Saq/1/

于 2012-04-15T02:19:12.603 回答
0

我会戳一下它。不确定我是否正确阅读了您的屏幕截图，但我将内容 div 的高度设置为 50-100px。

这是我的 jsfiddle：http: //jsfiddle.net/AX5Bh/

我正在使用min-height和max-heightCSS 属性来控制#innerContentdiv。

如果您水平展开结果窗口，您会看到一些文本被突出显示。如果内容大于#innerContentdiv，我已将内容设置为隐藏。你可能想要一些不同的东西。我只用<em>标签突出显示文本以证明它max-height是有效的。

如果删除除第一句以外的所有文本，您将看到它的高度为 50 像素。

这是浏览器支持min-height和的链接max-height： http: //caniuse.com/#search=max-height

于 2012-04-15T00:50:35.200 回答