Html 如何启用滚动而不是将 div 挤压在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3960848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to enable scrolling rather than squashing divs together
提问by Elliott
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
在我的网站上，当窗口被调整时，它是一个基于 div 的布局，所有东西都被推到了一起。例如图像重叠或移动到彼此下方，div 也相互重叠。
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
当 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>
The html is like that but obviously with more content
html就是这样，但显然内容更多
Hope I haven't made this too confusing, thanks.
希望我没有让这太混乱，谢谢。
回答by Rocket Ronnie
Just add overflow:auto;to your div.
只需添加overflow:auto;到您的div。
You can also use the following if you only want x or y scrolling
如果您只想要 x 或 y 滚动，也可以使用以下内容
overflow-x:auto;
or
或者
overflow-y:auto;
回答by Sachin Shanbhag
use the overflow:scroll;to enable scrolling in the DIVs
使用overflow:scroll;启用 DIV 中的滚动
回答by Tae
You must add white-space:nowrap;to your body tag.
您必须添加white-space:nowrap;到您的身体标签。
回答by DOK
I believe you may want overflow: auto;
我相信你可能想要 overflow: auto;
Here's a comparisonbetween autoand scroll.
回答by Brad
add the style
添加样式
overflow: scroll;
to #content
到 #content
回答by user3726345
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
这个答案已经很晚了，但是我偶然发现了这个问题，因为我在我的一个页面上遇到了问题，我的这个页面有 30 个不同类型的奇数输入，它们被分成两个表。我无法滚动以查看页面底部大约 10 个左右的输入，并且在调整浏览器宽度时甚至无法从左向右滚动。
What solved my issue was:
解决我的问题的是：
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
这激活了我的 X 和 Y 滚动条。
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
我的页脚在滚动时没有调整，我遇到了一个问题，它只会在滚动前固定在它所在的位置。这是由于我的主 CSS 将页脚的位置设置为绝对。简单的修复，只需在页面中创建一个新的样式元素并添加
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
我希望这可以帮助任何寻找解决方案的人。
回答by Christopher
As stated by user3726345 , the best option to use is the
正如 user3726345 所述，使用的最佳选择是
html,body {
overflow: visible;
}
using
使用
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.
不要给出最好的输出。然后您可以根据自己的喜好进一步调整页脚代码。
