Question

我正在尝试创建一个非常简单的网页。它应该是一个1000px宽的绿色，居中的矩形，在红色背景上从网页的顶部到底部一直延伸，无论有多少内容。

我不能让这个工作。如果我使用min-height（如下所示），如果内容不足，绿色区域不会一直延伸到页面底部。如果我用height替换它，如果内容很多，则内容会溢出绿色区域。

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesheet.css" />
    </head>
    <body>
        <div id="container">
            content here.
        </div>
    </body>
</html>

这是CSS：

html {
    height: 100%;
}

body {
    background-color: #F00;
    margin: 0;
    min-height: 100%;
}

#container {
    background-color: #0F0;
    width: 1000px;
    margin: 0 auto;
    height: 100%;
}

我知道这对于更多div来说是可行的，但它确实可以在不更改HTML的情况下工作。我该如何解决这个问题？

顺便说一句，我在Safari上。我不关心与不遵守标准的浏览器的兼容性。

Answer 1

以下是一份工作样本：

<!doctype html>
<html>
<head>
    <title>Container sample</title>
    <style>
        html, body
        { 
            margin: 0;
            padding: 0;
            height: 100%;
            background: red;
        }
        #container 
        {
            background: green;
            width: 1000px;
            min-height: 100%;
            margin: 0 auto 0 auto;
        }
    </style>
</head>
<body>
    <div id="container">
        Container sample
    </div>
</body>
</html>

有关详细信息，请查看my answer到类似的question。

Answer 2

您可以根据您的要求使用属性position absolute。它可能会帮助你

 #container {
    background-color: #0F0;
    width: 1000px;
    margin: 0 auto;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-500px;
}

Answer 3

将#container position:absolute; top设置为bottom并将0设置为#container { background-color: #0F0; width: 1000px; margin: 0 auto; position:absolute; top:0; bottom:0; }。

{{1}}

http://jsfiddle.net/jasongennaro/4ZLcD/

CSS - 无法获得最小高度的工作

3 个答案: