Question

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

Sample of layout

有人能指出我正确的方向如何用适当的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;
}

Answer 1

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

正如我认为其他人已经说过的那样，可以通过绝对定位将页脚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>

ORIGINAL： ~~可悲的是，css缺乏干净的方法来执行此操作。~~您不知道viewport高度（您称之为h），因此无法计算h-100-50您必须建立您的网站，以便大多数人将看到50px的页脚div。这样做的方法是为内容div设置最小高度。

最小高度值必须从某个标准视口高度导出。 Google实验室已经为访问者发布了关于视口大小的数据，并在此处对其进行了很好的可视化： http://browsersize.googlelabs.com/

我为自己的视口设计，这是620px高（根据谷歌~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>

Answer 2

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

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

Answer 3

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

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

我使用min-height和max-height CSS属性来控制#innerContent div。

如果水平扩展结果窗口，您将看到某些文本突出显示。如果内容大于#innerContent div，我已将内容设置为隐藏。你可能想要不同的东西。我只使用<em>标记突出显示该文字，以证明max-height正在运作。

如果删除所有文字但第一句话，你会看到它的高度是50像素。

以下链接指向min-height和max-height的浏览器支持：http://caniuse.com/#search=max-height

使用流体div创建固定高度的水平div

3 个答案: