Question

我之前发过另一个关于此的问题，但是如果没有JSfiddle，我很难解释。我花了大约20分钟做这个小提琴！

我有可扩展的DIV，所以“容器”需要延伸到扩展div的长度。问题是当扩展div时，内容会从页面底部消失，而不是拉伸页面。我尝试过添加填充等，但似乎没什么用。

上面链接的JS小提琴是我遇到的问题。

html, body {
    height: 100%;
}
#wrapper {
    height: 100%;
    margin-bottom:20px;
}

更新后的请求请再次检查

Answer 1

请尝试min-height: 100%;。

Answer 2

您需要删除padding-bottom div

上的margin-bottom和#container

请参阅 FIDDLE

边距和填充被添加到100％高度，因此它会将内容缩小。您也可以使用box-sizing属性，请参阅here

Answer 3

一些小风格的错误，只是像我提到的那样进行修正。

页脚位置样式不应该是absoulte，并且不应隐藏容器溢出。而你很高兴

以及其他一些需要纠正的事情

#footer {
    bottom:0; //removed position style
}

#container {
    position: relative; //overflow removed
    top: 5px;
    width: 400px;
    height: 100%;
    margin: 0 auto 0;
    box-shadow: 0 0 5px rgba(159, 159, 159, 0.6);
    -o-box-shadow: 0 0 5px rgba(159, 159, 159, 0.6);
    -webkit-box-shadow: 0 0 5px rgba(159, 159, 159, 0.6);
    -moz-box-shadow: 0 0 5px rgba(159, 159, 159, 0.6);
    padding-bottom:150px;
}

Answer 4

所以问题是'页脚文字'在身体的其他部分内没有伸展？因此，尝试删除#wrapper tag中的height属性：

#wrapper {
    margin-bottom:20px;
}

CSS - 100％高度不会扩展到内容

4 个答案: