Html 我的网站因浏览器调整大小而混乱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19213712/
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
My website mess up with browser resize
提问by Shubham Nishad
Below is an ideal look of my website http://i44.tinypic.com/jayyhu.jpg
下面是我网站的理想外观 http://i44.tinypic.com/jayyhu.jpg
but it doesn't look the same in all computers. I checked it with browsershots . org and my website mess up in almost all browsers. It even mess up when i resize my browser.
但它在所有计算机上看起来并不相同。我用 browsershots 检查了它。org 和我的网站几乎在所有浏览器中都搞砸了。当我调整浏览器大小时，它甚至会搞砸。
Perhaps it's because I don't get a horizontal scroll on browser resize. Please suggest me some ways to fix it.
也许是因为我在浏览器调整大小时没有得到水平滚动。请建议我一些修复它的方法。
My website url is http://come2chat.x10host.com
我的网站网址是 http://come2chat.x10host.com
if it doesn't open then please refresh the window. I am using a free webhost during the development period and so it's not reliable.
如果它没有打开，那么请刷新窗口。我在开发期间使用免费的虚拟主机，所以它不可靠。
回答by Aljullu
I think the biggest problem is that you are using margins and paddings to center the content in the screen and it makes everything more difficult.
我认为最大的问题是您使用边距和内边距来使屏幕中的内容居中，这让一切变得更加困难。
Instead, create a wrapping divand set margin: 0 auto;to it.
相反，创建一个包装div并设置margin: 0 auto;它。
I made this small change in your page, you can check it here:
我在你的页面做了这个小改动，你可以在这里查看：
http://www.radiogramola.cat/stack/u.html
http://www.radiogramola.cat/stack/u.html
I only added two div with class "wrapper" and some CSS resets. You can check the code.
我只添加了两个带有“wrapper”类的 div 和一些 CSS 重置。您可以检查代码。
Then, you should decide which kind of layout you want to create:
然后，您应该决定要创建哪种布局：
- Fixed: like stackoverflow.com, when the user resize the window, the page does not change.
- Fluid: like wikipedia.org, it expands occupying all the available space and adapts itself to the browser size.
- Responsive: like css-tricks.com, it changes the layout depending on the browser size.
- 修复：像stackoverflow.com一样，当用户调整窗口大小时，页面不会改变。
- Fluid：与 wikipedia.org 一样，它扩展占据所有可用空间并适应浏览器大小。
- 响应式：与 css-tricks.com 一样，它会根据浏览器大小更改布局。
You can view this video with a visual explanation:
您可以查看带有视觉解释的视频：
Depending on your decision, your next steps will be different.
根据您的决定，您的下一步将有所不同。
回答by Arun Aravind
The problem is with your layout. You have fixed widths and heights in pixels. When you resize window, they will stick to their heights and widths and wont resize accordingly. So content overlaps or jumps.
问题在于您的布局。您有固定的宽度和高度（以像素为单位）。当您调整窗口大小时，它们将坚持其高度和宽度并且不会相应地调整大小。所以内容重叠或跳跃。
Fix everything in percentage. That is the best you can get.
按百分比修复所有内容。这是你能得到的最好的结果。
Im putting up a demo below.
我在下面放了一个演示。
<body id="library">
<div id="body">
<div id="sidebar"></div>
<div id="content">
<div id="navbar"></div>
<div id="contentwindow"></div>
</div>
</div>
</body>
css
css
html {
height: 100%;
width: 100%;
}
#library {
margin: 0;
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
#library #body {
width: 90%;
height: 90%;
background-color: gray;
margin: 3% 5%;
}
#library #body #sidebar {
display: inline-block;
width: 20%;
height: 90%;
background-color: #8eeeff;
margin: 2%;
}
#library #body #content {
display: inline-block;
width: 70%;
height: 90%;
background-color: red;
margin: 2%;
}
#library #body #content #navbar {
width: 90%;
height: 20%;
background-color: blue;
margin: 3% 5%;
}
#library #body #content #contentwindow {
width: 90%;
height: 70%;
background-color: green;
margin: 3% 5%;
}
run this and resize your window.
运行它并调整窗口大小。
