调整窗口大小会导致浮动Div疯狂

问题描述

| 我正在尝试创建一个纯粹的基于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中消失的机体空白的问题。但是，当窗口大小变得足够小时，根据我拥有更高或更低的z索引，该框（浅红色）将超出主页div（浅蓝色）之上或之下。仅浮动框：这涉及更改HTML并将框（浅红色）置于代码中其余内容的前面。这会自动展开主页div（浅蓝色），这是我没有找到使用float方法的一种方法（没有给定的内容量）。但是，在Firefox中仍会删除正文的边距，在IE中仍会挤压文本，并且当出现以下情况时，框（浅红色）仍将在主页div（浅蓝色）的上方或下方（再次取决于z索引）窗户足够小。为所有内容分配最小宽度：这在解决IE问题方面非常成功，但是需要在页面上进行一些CSS处理，而此页面比这要复杂得多，并且将支持不同的媒体类型。而且，由于它仍处于浮动状态，因此它仍然无法解决Firefox中的页边距问题，也无法为我提供一种无需内容即可扩展主页div（浅蓝色）的方法。将主体边缘更改为边框：这也无法解决Firefox问题；无论是边框还是边距，当我使用浮点数时，它都会在页面的右侧和底部被切掉。在框中添加边距：这对Firefox也不起作用。我可以在主页内容的底部留出一定的页边距（浅蓝色）以保留在原处（这对我来说似乎特别奇怪），但是框上的右边距（浅红色）仍然会被剪掉。我们将不胜感激，因为我找不到任何网站或帖子来回答这些问题，更不用说描述这些问题了。我当然花了很多时间寻找和测试解决方案！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

div 大小大小导致浮动疯狂疯狂窗口窗口调整