调整浏览器大小时如何防止我的 div 层重叠？答案

【问题标题】：How do I prevent my div layers from overlapping when the browser is resized?调整浏览器大小时如何防止我的 div 层重叠？
【发布时间】：2010-12-14 17:26:06
【问题描述】：

过去几周我刚刚学习了如何正确设计布局。我基本上认为我的网站布局一切都很完美，并准备好将编码传输到 Wordpress ......然后我不小心调整了我的网络浏览器的大小，发现我所有的 div 图层都相互重叠。

它是这样的：

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

如何解决这个问题，以便在调整浏览器大小时我的divs 保持原位？

【问题讨论】：

标签： css browser html resize

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

查看min-width 属性。另一种选择是在视口宽度低于 x 像素时应用另一个样式表，CSS3 Media Queries 如下所示：

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

左右：

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

CSS3 媒体查询仍未得到广泛支持，因此您可能需要寻找一种解决方案，通过 window.onresize 事件将“窄”样式表与 JavaScript 一起应用。对于这样的解决方案，我会推荐 jQuery。

【讨论】：

【解决方案5】：

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

百分比也可以。

检查 stackoverflow 中的 css，并尝试在此处调整浏览器中的缩放级别 - 您会看到在任何缩放级别上都可以很好地调整大小。

【讨论】：

【解决方案6】：

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

overflow:auto;

或

overflow:hidden;

【讨论】：

我尝试了你的建议，但我不确定在哪里放置溢出属性。我把它放在包含所有其余内容的容器 div 中，不幸的是它没有做任何事情。不过，这里有一个指向我的整个 CSS 的链接。我不确定什么是真正相关的。到目前为止感谢您的帮助。我希望有一个简单的方法来解决这个问题。 :(
溢出将进入包含“这是一个副标题”文本的任何 div。如果将它放在包含标题文本的 div 上方的父 div 中，它可能无法正确继承。您也可以发布HTML吗？此外，如前所述，灵活的宽度通常是一个更好的主意，但需要你重构你的 css。
遗憾的是，溢出对我来说似乎不起作用。我发现图片在带有我的站点名称和导航的深色标题区域中也出现了歪斜。我上传了我的测试页面，只是为了让你可以看到它工作（不工作）。 lifesgarbage.com/rebnation.html
在您的#content 添加溢出：隐藏例如，#content { ...您的代码...溢出：隐藏；这应该修复图像扩展超过 div。您可能还想让这些边框图像透明（.png 或使用透明的 .gif）不错的网站顺便说一句。
我尝试了溢出：隐藏，你告诉我把它放在哪里，现在内容与左侧边栏合并。我刚刚上传了css文件，所以你可以查看测试页面的地址，自己看看。我不确定为什么我的新布局会像简单的浏览器调整大小那样做出反应。基本上我只想在浏览器底部出现一个水平滚动条，以便查看者可以调整窗口大小并仍然滚动浏览网站。我真的不希望任何内容消失或任何东西。对不起，如果我一开始不清楚。

【解决方案7】：

你能发布一些你的 CSS 吗？

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

【讨论】：