Question

好的，我在StackOverflow中尝试了很多关于这个问题的解决方案，但是没有一个能够解决这个问题。我想这是一个棘手的问题，需要一个棘手的解决方案。

从我所看到的情况来看，每个问题都与这个“占据”身体的东西有所不同，所以我想我和其他人在一起。

我真的需要帮助，伙计们。

继续我想要的东西：当“包装”div不能满足身体时，我希望div无论如何都要扩展到底部。所以，在小提琴中，我想要实现的并不是我布局上的灰色斑点。正如您所看到的，包装器的高度为100％（这是SO中针对此问题提供的一种常见解决方案），但这并没有帮助。

这个div不会扩展以适应包装器：

div#middle {
    padding:10px;
    margin:0 auto;
    height: 100%;
}

BTW，当过度滚动，页脚粘贴和包装卷轴时。这是理想的行为，它完美无缺。

Answer 1

我简单地补充道：

div#middlewrap {
    width:100%;
    position:absolute;
    margin-top:60px;
}

按照你的要求行事。 编辑：这是错误的 - 正确答案

当我决定从头开始重写css时，我就要放弃了，它比我想象的更简单。我将你的CSS简化为骨骼，并在中间包装中添加了一些很酷的overflow-y:auto;，并在页眉和页脚中添加了一些甜蜜的position:fixed;。然后我将填充调整为#middle内容div，并在主体和html中添加height:100%;（以便身体的每个孩子都可以成功设置为height:100%;），这就是出来的内容：

body, html {
    margin:0;
    height:100%;
}
div#headerwrap, div#footerwrap {
    position: fixed;
    left: 0;
    right: 0;
}
div#headerwrap {
    top: 0;
    height:64px;
    background-color: red;
}
div#middlewrap {
    height:100%;
    overflow-y:auto;
    background-color: blue;
}
div#middle {
    padding-top:70px;
    padding-bottom:35px;
}
div#footerwrap {
    bottom: 0;
    height:32px;
    background-color: green;
}

这就是你需要的所有CSS。很酷啊呃？ HERE IS THE FIDDLE
注意：我尊重你的语法，这也是正确的，但没有必要在你的css中的每个#ID之前编写DIV。删除这些选择器将大大降低大型项目中的css文件权重欢呼声。

Answer 2

将所有父元素设为height:100%：

body, html, body>div#middlewrap {
    height: 100%;
}
div#middle {
    min-height:100%;
}

Answer 3

不可能只使用CSS。需要javascript参与。取客户端高度 - （页眉+页脚）=内容的最小高度

使用％height不起作用，因为父级没有定义高度。

CSS内容div扩展到页面底部

3 个答案: