html - 未指定的内容高度，自动溢出和页眉/页脚始终在 View 中，页面上没有滚轮

Question

好的，所以我在应该是简单代码的问题上遇到了相当烦人的问题，我已经搜索了重复项，但它似乎略有不同。这是我的基本布局:

html:

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS:

html,body,#wrapper {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    position:   relative;
}

#header {
    position:   fixed;
    top:    0px;
    height: 40px;
    width:  100%;
    color:  white;
    background-color: #000000;
}

#content {
    position:   fixed;
    padding-bottom: 50px; /* to match the footer height*/
    top:    40px;
    bottom: 50px;
    height: 100%;
    width:  100%;
    overflow:   auto;
}

#footer {
    position:   fixed;
    bottom: 0px;
    height: 49px;
    width:  100%;
    border-top: 1px solid #000000;
    background-color:   skyblue;
    font-weight:    bold;
}

想法是包装器内的 3 个 div 占据页面的 100% - 换句话说:它们都始终可见。页眉在顶部，页脚在底部，内容在中间。

页脚和页眉可以固定大小(可以是像素或页面高度的百分比)，我希望内容自动占据页面的其余部分。

问题是页面可以有很多不同的分辨率(所以内容不能固定高度，除非我使用 javasript)。另一件事是内容 div 可以有可变数量的元素，这意味着它必须允许内容滚动，同时保持页眉和页脚可见。主要部分是:滚轮必须在内容 div 内，而不是整个页面。

我几乎有了这个 css 想要的东西，但是有些内容在溢出内容 div 时无法滚动到(我说的是垂直溢出 - 不会有水平溢出)。我真的很感激一些帮助，但这并不像看起来那么容易/简单，如果可能的话，因为我认为你需要一个固定的溢出高度:auto。

如果可能的话，我想要一个纯 css 解决方案，所以不要向我(或永远)提及 JqueryMobile。

这是现在的样子，请注意内容 div 上的滚轮问题:

Answer 1

我讨厌这种情况发生...我在发布后就找到了解决方案，决定再尝试一件事:我已经将#content 高度设置为“自动”并且做到了(因为有一次我自己画了注意滚轮，很明显问题出在 div 高度上)!只需要测试并确保所有/大多数浏览器都是这种情况!

也许它会对其他人有所帮助!