网站中的高度问题

Question

我正在创建一个我已经创建了一个结构的网站，但我正面临高度问题。这是我所期待的

但这就是我得到的

以下是CSS：

html {height:100%!important;}
body {
    margin:0;
    font:12px/15px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#8a8a8a;
    min-width:1000px;
    background:#fff;
    min-height:100%!important;
}

#wrapper {
    position:relative;
    min-height:100%;
    overflow:hidden;
    background:url(../images/wrapper.jpeg) repeat-y;
}
#content {
    float:left;
    width:100%;
    min-height:100%;
}

Answer 1

100％只是设置为100％的内容，尝试使用像素高度

#content {
    float:left;
    width:100%;
    min-height:500px;
}

Answer 2

我会在你的包装器上放一个min-height像素。由于#content设置为100％高度，它将填充所有包装器。

这样，如果填充浏览器的整个高度所需的内容少于所需内容，则页面将在内容下方添加空格以填充浏览器高度。我在第一次构建新页面时经常这样做，因为我没有任何内容，但想要了解填充浏览器窗口时的外观。

我建议做这样的事情：

#wrapper {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    background: url(../images/wrapper.jpeg) repeat-y;
}

您可能需要调整min-height（以像素为单位）以适合您的网站 - 无论如何使其填满浏览器窗口。