Question

我有一个非常恼人的问题，我似乎无法找到一个简单的解决方案。请考虑以下HTML：

<html>
<body>
    <div id="page">
        <!-- Some HTML here -->
        <div id="menu"><!-- Some stuff here --></div>
        <!-- Some HTML here -->
    </div>
</body>
</html>

使用以下CSS：

body {
    text-align: center;
}

#page {
    margin: 0px auto;
    max-width: 1200px;
}

#menu {
    width: 100%;
    padding: 0px 2000px;
    margin-left: -2000px;
}

这会给出一个居中的页面div，里面有一个菜单栏。事情是，每当浏览器宽度变为＆gt; 1200px，div不会再增长，但菜单div必须始终一直延伸到窗口边缘。现在这个方法的问题是，我得到一个水平滚动条，因为菜单栏大于屏幕。所以，我正在寻找一个解决方案。阻止滚动条对水平滚动条产生影响的东西就可以了。但是，禁用水平滚动条不是一种选择，因为内容也必须在小型设备上滚动...

我知道我可以通过拉出页面div之外的菜单栏来解决这个问题，但这很难，因为我正在编辑Drupal主题，我希望这个更改尽可能少地产生影响。

提前感谢任何建议！

Answer 1

你的意思是你希望div一直保持100％宽度但是要在其中滚动？如果是这样，那么你应该在主div中有一个更宽的div。像这样的东西 -

<div id="full-width">
    <div id="scrolling-div">
    </div>
</div>

<style type="text/css">
    #full-width {
        float:left;
        width:100%;
        height:500px;
        overflow-x:visible;
    }

    #scrolling-div {
        float:left;
        width:300%;
        height:500px;
    }
</style>

我测试了这段代码，它有效：）

Answer 2

您可以通过设置这样的html和正文样式轻松解决此问题：

html, body {
   overflow-x:hidden;
}

body {
   margin: 0;
}

这应该使用您现在拥有的当前代码。

将div设置为不影响滚动条

2 个答案: