我正在尝试创建一个纯基于 HTML 和 CSS 的布局，在左侧显示页面的主要内容(扩展到页面的整个宽度，减去框)和右侧的一个较小的框，用于导航或某种信息。以下是导致问题的代码示例，其中描述了问题:
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
出于语义原因，我想稍后在代码中保留框(浅红色)，但这是可选的。以下是我已经尝试过的一些比较成功的方法，以及它们似乎不起作用的原因:
绝对定位:当浏览器未调整大小时，这与我自己的代码一样好。它确实在某种程度上解决了 Firefox 中消失的正文边距问题。但是，当窗口大小足够小时，框(浅红色)将位于主页 div(浅蓝色)上方或下方，具体取决于我设置的 z-index 更高或更低。
仅 float 框:这涉及更改 HTML 并将框(浅红色)置于代码中其余内容之前。这会自动扩展主页 div(浅蓝色)，这是我还没有找到使用 float 方法(没有给定内容量)的方法。然而，正文的边距在 Firefox 中仍然被移除，文本在 IE 中仍然被挤压，框(浅红色)仍然会在主页 div(浅蓝色)上方或下方(再次取决于 z-index)窗口变得足够小。
为所有内容分配最小宽度:这非常成功地解决了 IE 问题，但需要在比这更复杂且支持不同媒体类型的页面上进行一些 CSS 处理。而且，它仍然没有解决 Firefox 中的正文边距问题，也没有提供一种方法来扩展没有内容的主页 div(浅蓝色)，因为它仍然是 float 的。
将正文边距更改为边框:这也不能解决 Firefox 的问题；无论是边框还是边距，当我使用 float 时，它都会在页面的右侧和底部被切掉。
向框添加边距:这对 Firefox 也不起作用。我可以让主页内容(浅蓝色)的底部边距保持原位(这对我来说似乎特别好奇)，但框的右边距(浅红色)仍然被削减。
任何帮助将不胜感激，因为我找不到任何网站或帖子来回答这些问题，更不用说描述这些问题的存在了；我确实投入了大量时间来寻找和测试解决方案!
最佳答案
亲爱的先生，您好，您似乎在构建布局方面遇到了麻烦。
据我了解，您需要 2 列布局。左列自动扩展到 w/e 的宽度减去右列宽度减去 20 像素的边距。右栏是固定宽度，将包含一个菜单或各种 html 结构...
在左栏中，您有文本，除此之外，还有一个固定宽度的框，该栏中的固定宽度框应始终位于其中。这意味着我们需要一个最小宽度，即固定宽度框宽度 + 20 像素边距 + 右列宽度。
我通过在所有内容周围制作一个容器，对其应用最小宽度并制作一个虚拟容器来解决 IE6 中的最小宽度问题来做到这一点。
这是一个工作示例:http://jsfiddle.net/uXyPu/
我没有运行 IE6 或 firefox 3.5 版本来测试它，但我相当有信心这会起作用。
作为旁注，您在 body 标签上使用了边距，请不要这样做。作为基本规则，让您的 body 完全拉伸(stretch)，最多使用填充物。除此之外，避免边距是防止 IE6 中出现大量问题同时保持布局与现代浏览器兼容的好方法。并且根本不要在 float 元素上使用 padding/margin ...
第一位评论你问题的先生关于完全避免 ie6 是正确的，我希望你让 big bux 做这个元素，这样公司可能会真正开始考虑他们滥用 ie6...
关于css - 窗口调整大小时 float Div 疯狂，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6324240/