Html 调整浏览器大小时，如何防止 div 层重叠？

How do I prevent my div layers from overlapping when the browser is resized?

提问by

I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my divlayers were overlapping each other.

我刚刚花了最近几周学习如何正确设计布局。我基本上认为我的网站布局已经完美无缺，并准备将编码转移到 Wordpress……然后我不小心调整了我的网络浏览器的大小，发现我的所有div图层都相互重叠。

Here's what it looks like:

这是它的样子：

Basically it looks as though it's mainly my center content divthat is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.

基本上看起来好像主要是我的中心内容div被挤出了，以及我的标题图片和导航女巫都在同一个顶部div。我的页脚也被压缩了。我已经在互联网上搜索了此问题的解决方案，但似乎找不到任何东西。

How do I fix it so that my divs stay in place when the browser is resized?

如何修复它以便div在调整浏览器大小时我的s 保持原位？

采纳答案by ErikHazzard

I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.

我想到了。事实证明，我的中心内容边距的宽度是由边距决定的，而不仅仅是直接宽度（即 500 像素）。因此，无论何时调整页面大小，浏览器两侧的边距都会尝试保持原样，从而使整个列变小。我只需要去掉边距并指定我希望列在页面上的位置并为其调整宽度。

回答by ErikHazzard

as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowingto other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div) e.g.

正如 Walter 所说，您的 CSS 会有所帮助。但是，主要问题是 div 中的内容溢出到其他 div，因为内容的 div 不能包含所有内容。
在您的 css 中，尝试将 div 的溢出属性设置为自动（显示滚动条）或隐藏（如果内容超出 div，则仅隐藏内容）例如

overflow:auto;

or

或者

overflow:hidden;

回答by Capi Etheriel

you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.

您也可以尝试最小宽度。我假设中心 div 是流动的，侧边栏是固定宽度的。

回答by George Sisco

Express your widths and font-sizes in ems. Here's a good calculator: http://riddle.pl/emcalc/

以 em 表示您的宽度和字体大小。这是一个很好的计算器：http: //riddle.pl/emcalc/

Percentages will work, too.

百分比也会起作用。

Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.

检查 stackoverflow 中的 css，并尝试在此处调整浏览器中的缩放级别 - 您将看到在任何缩放级别下所有内容都很好地调整了大小。

回答by Asbj?rn Ulsberg

Check out the min-widthproperty. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Querieslike so:

看看min-width楼盘。当视口宽度低于 x 像素时，另一种选择是使用CSS3 媒体查询应用另一个样式表，如下所示：

@media all and (max-width: 30em) {
  /* Alternative narrow styles */
}

or so:

或者：

<link media="all and (max-width: 30em)"
      rel="stylesheet" href="narrow.css" />

CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresizeevent. I'd recommend jQueryfor such a solution.

CSS3 媒体查询仍未得到广泛支持，因此您可能希望研究一种通过window.onresize事件应用带有 JavaScript 的“窄”样式表的解决方案。对于这样的解决方案，我建议使用jQuery。

回答by Walter Mundt

Can you post some of your CSS?

你能发布一些你的CSS吗？

The simplest way is to give all of your columns relatively sane widthsettings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.

最简单的方法是为所有列width设置相对合理的设置，这样浏览器窗口的大小就不会影响布局的大小。使流体宽度列的行为更加复杂，并且更多地取决于您的布局的细节。

回答by Brandon Langlois

I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line

我有同样的问题，如果你的 DIV 容器中有宽度和高度，除非你放一个最小宽度，否则它不会改变，除了宽度。我遇到的问题是当我将浏览器窗口设为 div 时会转到下一行

so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.

所以我所做的是在容器中设置了高度和宽度。在我没有设置高度之前，我让 div 来确定高度。