0

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

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% 的页面 - 换句话说：它们总是在 view 中。页眉在顶部，页脚在底部，内容分别在中间。

页脚和页眉可以是固定大小（无论是像素还是页面高度的百分比），我想自动占据页面其余部分的内容。

问题是页面可以有许多不同的分辨率（所以内容不能是固定的高度，除非我使用 javasript）。另一件事是内容 div 可以具有可变数量的元素，这意味着它必须允许滚动内容，同时保持页眉和页脚都在视图中。主要部分是：滚轮必须在内容 div 内，而不是页面范围内。

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

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

这是它现在的样子，注意内容 div 上的滚轮问题： 布局几乎是正确的，减去溢出行为

4

1 回答 1

1

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

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

于 2013-03-24T22:40:46.290 回答