3

好的，我已经尝试了 StackOverflow 中提供的关于这个问题的很多解决方案，但没有一个有效。我想这是一件棘手的事情，需要一个棘手的解决方案。

据我所见，这种“占据”身体的东西每个问题都不同，所以我想我在这里遇到了不同的问题。

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

这是我的问题：http: //jsfiddle.net/Ff49Z/5/

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

正是这个 div 不适合包装器：

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

顺便说一句，当过度滚动时，页脚棒和包装滚动。这是期望的行为，并且它完美无缺。

4

3 回答 3

4

我只是补充说：

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

并按您的要求工作。编辑：这是错误的 - 下面的正确答案

当我决定从头开始重写 css 时，我正要放弃，结果比我预期的要简单。我将您的 CSS 简化为骨骼，并overflow-y:auto;为中间包装添加了一些酷炫的内容，position:fixed;并为页眉和页脚添加了一些甜美的元素。然后我调整了#middle内容 div的填充，并height:100%;在 body 和 html 中添加了一个（以便 body 的每个子项都可以成功设置为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。很酷吧？
这是FIDDLE
注意：我尊重你的语法，这也是正确的，但没有必要在你的 css 中的每个#ID 之前写 DIV。删除这些选择器将显着降低您在较大项目中的 css 文件重量。
干杯。

于 2013-04-15T23:16:17.093 回答
1

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

body, html, body>div#middlewrap {
    height: 100%;
}
div#middle {
    min-height:100%;
}
于 2013-04-15T23:30:50.973 回答
0

仅使用 CSS 是不可能的。需要涉及javascript。取客户端高度 - (header + footer) = 内容的最小高度

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

于 2013-04-15T23:13:07.000 回答