窗口调整大小时浮动div的混乱问题

Question

窗口调整大小时浮动div的混乱问题

6

我正在尝试创建一个完全基于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更高或更低。
仅浮动盒子：这涉及更改HTML并将盒子（浅红色）放置在代码的其余内容之前。这会自动扩展主页div（浅蓝色），这是我没有找到使用浮动方法（没有给定数量的内容）的方法。但是，在Firefox中仍然删除了body的边距，在IE中文本仍然被压缩，并且当窗口变得足够小时，盒子（浅红色）仍将覆盖或在主页div（浅蓝色）下方（再次取决于z-index）。
为所有内容分配min-width：这在解决IE问题方面非常成功，但需要在比这更复杂且支持不同媒体类型的页面上进行一些CSS工作。而且，它仍然没有解决Firefox中的body边距问题，也没有给我一个扩展主页div（浅蓝色）的方法，因为它仍然是浮动的。
将body边距更改为边框：这也无法解决Firefox问题；无论是边框还是边距，在使用浮动时都会被削减掉页面的右侧和底部。
将边距添加到盒子中：这对于Firefox也不起作用。我可以让主页内容（浅蓝色）的底部边距保持在原地（这对我来说似乎特别奇怪），但是盒子（浅红色）的右边距仍然被削减。

任何帮助都将不胜感激，因为我找不到任何网站或帖子回答这些问题，更不用说描述这些问题存在了；我肯定花费了大量时间寻找和测试解决方案！

- JBT

3

你关心哪些浏览器和版本？我在你的文本中注意到了这句话：“这次是在Internet Explorer 6中” - 除非你有充分的理由，否则不应该支持Internet Explorer 6。http://ie6countdown.com/ + http://gs.statcounter.com/#browser_version-ww-monthly-201005-201105 - thirtydot

@thirtydot 是的，我正在尽可能使它在Internet Explorer 6上正常工作的原因有一些很好的理由。我设计的主要内部网站由于各种各样的借口(无论是好的、坏的还是丑陋的)仍在使用IE 6;管理员非常坚定，不会升级。除了IE 6之外，我还对从内部网站以外访问页面的用户感兴趣;很可能他们会使用更现代的浏览器。这就是为什么我也关注Firefox 3.5和4中的问题，就像IE 6的问题一样，我找不到任何文档来解决它。 - JBT

通常情况下，在不显式指定宽度的情况下，你不应该浮动一个元素。然而，你的div.page却这样做了。如果你无法以某种方式显式使用宽度，则应查找另一种布局方式，而不是尝试浮动元素（例如将浮动元素嵌套在未指定宽度的元素内部）。 - Frug

3个回答

0

我将您的右侧框移动到代码的上方，给它一个向右浮动，然后在主页面中使用百分比设置了宽度。

编辑：

也许这样更好。我使用 top: 20px; right: 20px; 绝对定位了侧边框，并给主页面添加了 margin-right: 120px，以便它不会被侧边 div 遮盖。

请尝试新代码：

<!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 {
    background-color:#AAAAFF;
    margin-right: 120px; }
  div.wide {
    width: 300px;
    background-color:#AAFFAA; }
  div.box {
    position: absolute;
    top: 20px;
    right: 20px;
    width:100px;
    background-color: #FFAAAA; }
  h1 {font-size:x-large}
  p {
    padding-bottom:5px;
    font-size:small }
 </style>
</head>

<body>

 <div class="page">
  <h1>MAIN PAGE</h1>

  <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>

- Max

-2

使用表格...

<!DOCTYPE HTML>
<html>
<head>
</head>

<body>
    <table width="100%">
    <tr>
        <td valign="top">
             page content
        </td>
        <td width="100" valign="top">
           <div class="box">
               menu content
           </div>
        </td>
    </tr>
    </table>
</body>
</html>

- Saad Imran.

亲爱的先生，在这种情况下不需要使用表格_（我马上会提出我的解决方案） - sg3s

将文本和必要的CSS添加到表格中，并删除cellpadding/spacing，这个想法在IE6中有效。为了在Firefox中修复它，我给盒子（红色）添加了一个右边距，然后，因为这次它突出了边框，所以完全删除了右页边框。尽管这是一个混乱、不语义化的解决方案，但它确实有效；谢谢。我之前选择了一个不同的布局（更接近我的原始代码），放弃了兼容性，这让管理员极度不满，但我希望以后可以修复它。无论如何，我仍在寻找更语义化的解决方案，如果有的话。 - JBT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sg3s · Accepted Answer

尊敬的先生，你好，您似乎在构建布局方面遇到了麻烦。

据我所理解，您想要一个两列布局。左侧列自动扩展到宽度等于其所在位置的宽度减去右侧列的宽度再减去20像素用于边距。右侧列是固定宽度的，将包含菜单或各种HTML结构......

在左侧列中，您有文本和其他内容，还有一个固定宽度的盒子，此列中的固定宽度的盒子应始终保持在其中。这意味着我们要有一个最小宽度，它是固定宽度框的宽度+ 20像素边距+右侧列的宽度。

为此，我通过对所有内容进行容器包装，对该容器应用最小宽度并制作虚拟容器来解决IE6中的最小宽度问题。

这里是一个运作良好的示例： http://jsfiddle.net/uXyPu/

我没有运行IE6或Firefox 3.5的版本来测试它，但我相信这会有效。

顺便提一下，您在body标签上使用了一个margin，请避免这样做。基本的规则是保持body完全展开，最多应用填充。此外，避免使用边距是在IE6中预防各种问题的好方法，同时仍然与现代浏览器兼容您的布局。在浮动元素上根本不要使用填充/边距...

您问题上第一个评论区里的先生对于避免ie6是正确的，我希望您向big bux收取了高昂的费用来完成这个项目，以便公司可能开始思考他们滥用ie6 ...