Question

在我的网站上它是一个基于div的布局，当窗口被重置时，所有内容都被推到一起。如图像重叠或相互移动，div也相互重叠。

当div的内容大于窗口大小时，如何让它滚动，类似于facebook，如果你调整窗口大小，它可以防止任何重叠，只是让用户滚动？

body
{
    background-color: #B0B0B0;
    color: #ffffff;
    margin-top: 0px;
    margin: 0px;        
}

#header
{   
    width: 100%;
    height: 100px;
    margin: 0px;
    padding: 0px;
}

#content
{

    width: 80%;
    height: 800px;  
    margin-top: 50px;       
    margin-left: auto;
    margin-right: auto;
    padding: 30px;      
}

<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>

html就是这样，但显然有更多内容

希望我没有让这个太混乱，谢谢。

Answer 1

只需将overflow:auto;添加到您的div。

如果您只想要x或y滚动

，也可以使用以下内容

overflow-x:auto;

或

overflow-y:auto;

Answer 2

使用overflow:scroll;启用DIV中的滚动

Answer 3

您必须将white-space:nowrap;添加到正文标记。

Answer 4

我相信您可能需要overflow: auto;

auto和scroll之间的

Here's a comparison。

Answer 5

添加样式

overflow: scroll;

到#content

Answer 6

这个答案已经很晚了，但我偶然发现了这个问题，因为我在我的一个页面上遇到了问题，我在这个页面上有30个不同类型的奇数输入，它们分成两个表格。我无法滚动查看页面底部大约10个左右的输入，甚至在调整浏览器宽度时甚至无法从左向右滚动。

解决了我的问题是：

    html, body {
    overflow: visible;
    }

这激活了我的X和Y滚动条。

我有一个问题，我的页脚在滚动时没有调整，而是在滚动之前保持固定的位置。这是因为我的主CSS将页脚的位置设置为绝对。简单修复，只需在页面中创建一个新的样式元素并添加

footer {
        position: fixed;
        min-width: 100%;
    }

我希望这有助于任何寻求解决方案的人。

Answer 7

如user3726345所述，使用的最佳选择是

html,body {
overflow: visible;
}

使用

overflow: auto;

dosnt提供最佳输出。然后你可以根据自己的喜好进一步调整你的页脚代码。

Answer 8

采用body样式的代码

overflow:auto;

如何启用滚动而不是将div压缩在一起

8 个答案: