html - 网站高度问题

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像素以适合您的站点 - 使其填充浏览器窗口所需的一切。