html - 如何使用隐藏在容器上的 overflow-x 并防止固定子 div 重叠滚动条？

Question

我有一个单页网站，它通过 JS 导航并且几乎按预期工作。一些页面是全屏的(视口(viewport)的 100% 宽度和高度，所有内容响应地适应这个空间)。有些页面是基于文本的页面，需要允许滚动。

我需要在我的主要 #wrapper 上使用 overflow-x:hidden，因为我从屏幕外滑动各种元素并且没有 overflow-x:hidden 它在 Samsung Stock 浏览器上不起作用(它适用于所有其他浏览器)只需在 body 元素上使用 overflow-x:hidden 但这当然不适用于 Samsung Stock!)

您可以在 http://jsfiddle.net/deshg/4nLoazzs/1/ 看到 fiddle ，如果您从 #wrapper 元素中删除 overflow-x:hidden ，那么一切都会按预期工作。但是，当您在 #wrapper 元素上包含 overflow-x:hidden 时(就像现在一样)，它会导致固定的 #footer div 与滚动条重叠。如您所见，我尝试将 #wrapper 定义为 100% 宽度，并将 #footer 宽度设置为继承，但这也无济于事。

任何人都可以解释我如何使用 overflow-x:hidden 保持相同的结构在包装容器上，但确保页脚不与滚动条重叠，因为它让我抓狂!理想情况下，我想避免使用自定义卷轴，因为其他一切在所有设备上都是完美的，这是唯一剩下的问题!

非常感谢!

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="footer">FOOTER</div>
</div>

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

p {
    margin:0;
    padding: 0 0 1em 0;
}

#wrapper {
    height:100%;
     overflow-x:hidden;
   width:100%;
}
#header {
    height:10%;
    background-color: #ffcc00;
}

#content {
    height:80%;
    background-color: #cc00ff;
    padding-bottom:15%;
}

#footer {
    position:fixed;
    bottom:0;
    left:0;
    height:10%;
    background-color: #dd00ff;
    width:inherit;
}

Answer 1

如何将所有内容放入一个容器中(每个评论的标题除外):

<div id="header">
    <img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="Image Not Available"></img>
</div>
<div id="container">
    <div id="wrapper">
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="footer">FOOTER</div>
    </div>
</div>

然后是 CSS(更改页脚宽度:100%):

body, html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
p {
    margin:0;
    padding: 0 0 1em 0;
}
#wrapper {
    height:100%;
    width:100%;
    overflow-x:hidden;
}
#header {
    height:10%;
    background-color: #ffcc00;
}
#content {
    height:80%;
    background-color: #cc00ff;
    padding-bottom:15%;
}
#footer {
    position:fixed;
    bottom:0;
    left:0;
    height:10%;
    background-color: #dd00ff;
    width:100%;
}

工作 JSFiddle:http://jsfiddle.net/4nLoazzs/6/ * 添加工作图像 *

糟糕，错误链接 * 已修复 *