html - 包装动态高度

Question

我有一个包含 html 页面所有元素的包装器。

#wrapper {
     width: 1000px;
     height: auto;
     min-height: 100%;
     margin: auto;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
     background-attachment: fixed;
     -moz-border-radius:20px;
     -webkit-border-radius:20px;
     border-radius:20px;
}

这是 HTML 代码示例

 <div id="wrapper">
        <div id="uppermenu">
             <div id="container">
                  <div id="logo"> <img src="images/logo.png" height="100%"> </div>
                  <div id="banner"> <br></div>
             </div>
        </div>
        <div class="sidemenu"> [...] </div>
        <div id="guide"> [...] </div>
 </div>

我希望这个包装器根据它必须包含的内容改变它的高度，但是当我这样做时并没有发生。如果我尝试使用

overflow: hidden;

包装器被 uppermenu div(它应该包含)向下移动并使用

clear: both;

内容末尾没有任何改变。我已经尝试了至少 5 个在这里正确回答的不同问题，但没有一个对我有效。最后一件事:我写的包装器集(最小高度为 100%)非常适合我的浏览器屏幕，但这显然不是我想要的样子!有帮助吗？？？

编辑:这是侧边菜单类的 CSS

.sidemenu {
      float: left;
      margin-left: 20px;
      margin-top: 20px;
      height: 200px;
      width: 150px;
      background-color: #4488ff;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      z-index: 3;
}

和指南id

#guide {
   float: left;
   margin-top: 20px;
   margin-left: 50px;
   height: 100%;
   width: 760px;
   background-color: #4488ff;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   z-index: 3;
}

上层菜单和容器

#uppermenu {
       position: fixed;
       top: 0px;
       width: 1000px;
       height: 100px;
       margin: auto;
       background: #004465;
       z-index: 5;
}
#container {
     width: 1000px;
     min-height: 100%;
     margin: auto;
}

Answer 1

解决方案一:清除:两者

添加一个样式为 clear:both 的 block 元素；在它上面将清除超过该点的 float 并阻止该元素的父元素折叠。 http://jsfiddle.net/TVD2X/1/

优点:允许您清除一个元素，您在下方添加的元素不会受到上方 float 元素和有效 css 的影响。

缺点:需要另一个标签来清除 float 、膨胀的标记。

注意:要回退到 IE6 并使其在禁欲 parent (即输入元素)上工作，您不能使用 :after。

方案二:显示:表格

添加显示:表格；给 parent ，让它摆脱 float 并以正确的高度显示。 http://jsfiddle.net/h9GAZ/1/

优点:没有额外的标记并且更简洁。适用于 IE6+

缺点:需要无效的 css 以确保在 IE6 和 7 中一切正常。

注意:IE6 和 7 width auto 用于防止宽度为 100%+padding，这在较新的浏览器中不是这种情况。

关于其他“解决方案”的说明

这些修复工作回到支持最低的浏览器，全局使用率超过 1% (IE6)，这意味着使用 :after 不会削减它。

Overflow hidden 确实会显示内容，但不会阻止元素折叠，因此不会回答问题。使用内联 block 可能会产生错误的结果， child 的边距很奇怪等等，表格要好得多。

设置高度确实可以“防止”折叠，但这不是正确的解决方法。

无效的 CSS

无效的 css 永远不会伤害任何人，事实上，它现在已成为常态。使用浏览器前缀与使用特定于浏览器的 hack 一样无效，并且不会对最终用户产生任何影响。

总结

我使用上述两种解决方案来使元素正确 react 并相互配合，我恳请您也这样做。