Question

我有一个单页网站，通过JS导航，几乎按预期工作。有些页面是全屏的（100％宽度和视口高度，所有内容都响应地适合此空间）。有些页面是需要允许滚动的基于文本的页面。

我需要在我的主#wrapper上使用overflow-x：hidden，因为我从屏幕上滑动各种元素而没有溢出-x：隐藏它不能在三星股票浏览器上工作（它可以工作所有其他人只需使用overflow-x：隐藏在body元素上，但这当然不适用于三星股票！）

你可以在http://jsfiddle.net/deshg/4nLoazzs/1/看到一个小提琴，如果从#wrapper元素中删除overflow-x：hidden，那么它就会按预期工作。但是当你在#wrapper元素上包含overflow-x：hidden时（就像现在一样），它会导致固定的#footer div与滚动条重叠。正如您所看到的那样，我已经尝试将#wrapper定义为100％宽度，并将#footer宽度设置为继承，但这并没有帮助。

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

非常感谢！

<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/ *添加工作图像*

糟糕错误链接 * FIXED *

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

1 个答案: