Html 防止div在调整页面大小时移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8841845/
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
Prevent div from moving while resizing the page
提问by swati saoji
I'm quite new to CSS and I'm trying to get a page up and running. I managed to successfully produce what I thought was a nice page until I resized the browser window then everything started to move around. I have no idea why this is happening!!
我对 CSS 很陌生，我正在尝试启动并运行一个页面。我设法成功地制作了我认为不错的页面，直到我调整了浏览器窗口的大小，然后一切都开始移动了。我不知道为什么会这样！！
Could someone offer me some advice please. When I resize the window I would like the 'objects' to stay where they are but the window to resize. for example, if I drag the bottom corner of a window up and to the left I'd expect to see what was at the bottom right disapear and scroll bars to appear but the object in the top left hand corner would stay exactly where they are.
有人可以给我一些建议吗？当我调整窗口大小时，我希望“对象”保持原位，但要调整窗口大小。例如，如果我将窗口的底角向上和向左拖动，我希望看到右下角的内容消失并出现滚动条，但左上角的对象将保持原样.
Am I making sence ?
我讲道理吗？
Have a look at working condition of my page : http://aimmds1.estheticdentalcare.co.in/
看看我页面的工作状况：http: //aimmds1.estheticdentalcare.co.in/
then try to resize the browser window by dragging the right size leftwards . and look at the content in header , and also the menubar .. they jump down ,, the header content was also jumping down then i make overflow: hidden ; .. but as i understand all this is not the right way.
然后尝试通过向左拖动正确的大小来调整浏览器窗口的大小。并查看标题中的内容，还有菜单栏.. 他们跳了下来，标题内容也跳了下来，然后我使溢出：隐藏；..但据我所知，这一切都不是正确的方法。
Please find the html and CSS here : http://jsfiddle.net/swati/hCDas/
请在此处找到 html 和 CSS：http: //jsfiddle.net/swati/hCDas/
I already tried prevent div moving on window resize, i tried setting min-width:820px; for div header , that the main containing div.. but that doesnt solve it.
我已经尝试防止 div 在窗口调整大小上移动，我尝试设置 min-width:820px; 对于 div header ，主要包含 div .. 但这并不能解决它。
Thanks in anticipation of your help.
感谢您的帮助。
回答by Diodeus - James MacFarlane
1 - remove the margin from your BODY CSS.
1 - 从您的 BODY CSS 中删除边距。
2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>
2 - 将所有 html 包装在一个包装器中 <div id="wrapper"> ... all your body content </div>
3 - Define the CSS for the wrapper:
3 - 定义包装器的 CSS：
This will hold everything together, centered on the page.
这会将所有内容放在一起，以页面为中心。
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
回答by punkrockbuddyholly
There are two types of measurements you can use for specifying widths, heights, margins etc: relative and fixed.
您可以使用两种类型的度量来指定宽度、高度、边距等：相对和固定。
Relative
相对的
An example of a relative measurement is percentages, which you have used. Percentages are relevant to their containing element. If there is no containing element they are relative to the window.
相对测量的一个例子是您使用过的百分比。百分比与其包含的元素相关。如果没有包含元素，它们是相对于窗口的。
<div style="width:100%">
<!-- This div will be the full width of the browser, whatever size it is -->
<div style="width:300px">
<!-- this div will be 300px, whatever size the browser is -->
<p style="width:50%">
This paragraph's width will be 50% of it's parent (150px).
</p>
</div>
</div>
Another relative measurement is ems which are relative to font size.
另一个相对度量是与字体大小相关的 em。
Fixed
固定的
An example of a fixed measurement is pixels but a fixed measurement can also be pt (points), cm (centimetres) etc. Fixed (sometimes called absolute) measurements are alwaysthe same size. A pixel is always a pixel, a centimetre is always a centimetre.
固定测量的一个例子是像素，但固定测量也可以是 pt（点）、cm（厘米）等。固定（有时称为绝对）测量始终是相同的大小。像素永远是像素，厘米永远是厘米。
If you were to use fixed measurements for your sizes the browser size wouldn't affect the layout.
如果您对尺寸使用固定尺寸，则浏览器尺寸不会影响布局。
回答by Adaz
I'd rather use static widths and if you'd like your page to resize depending on screen size, you can have a look at media queries.
我宁愿使用静态宽度，如果您希望根据屏幕尺寸调整页面大小，您可以查看媒体查询。
Or, you can set a min-width on elements like header, navigation, content etc.
或者，您可以在标题、导航、内容等元素上设置最小宽度。
回答by T I
hi firstly there seems to be many 'errors' in your html where you are missing closing tags, you could try wrapping the contents of your <body>in a fixed width <div style="margin: 0 auto; width: 900px>to achieve what you have done with the body {margin: 0 10% 0 10%}
嗨，首先，您的 html 中似乎有很多“错误”，您缺少结束标记，您可以尝试将内容包装<body>在固定宽度中<div style="margin: 0 auto; width: 900px>以实现您对body {margin: 0 10% 0 10%}
