html - 溢出-x 拒绝显示？

Question

我在一个网站上工作，当窗口缩小（模拟平板电脑/手机）时，我无法让溢出-x 滚动。

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: auto;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: auto;
}

我能想到的就是控制这个。您可以在此处查看该站点。

提前感谢您的任何建议。

Answer 1

您在#wrapperdiv 上设置了最小宽度，这在技术上意味着它永远不会有任何溢出的内容。

将包装器的 CSS 设置为以下内容：

#wrapper {
    margin: 0 auto;
    max-width: 2560px;
    min-width: 900px;
    overflow-x: auto;
    padding: 0;
    position: relative;
    width: 100%;
}

并从 CSS 中删除body&html元素的溢出属性，它们都是不必要的。

进行上述更改后，您应该能够在移动设备上水平滚动，但上面的 min-width 值可能需要更改。

Answer 2

如果你想让元素滚动，你应该为它定义宽度或者它的父级。
所以将 min-width 添加到您的 html 样式中：

html {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow-x: auto;
   min-width: 1000px;  # this is when html will be scroll-x
}