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％）非常适合我的浏览器屏幕，但这显然不是我想要的样子！任何帮助???

编辑：这是sidemenu类的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和容器

#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;在它上面将清除浮点数超过该点并停止该元素的父级崩溃。 http://jsfiddle.net/TVD2X/1/

优点：允许您清除元素，下面添加的元素不受上面浮动元素和有效css的影响。

缺点：需要另一个标记来清除浮点数，膨胀标记。

注意：要回退到IE6并使其处理弃权父母（即输入元素），您将无法使用：after。

解决方案二： display：table

添加display：table;到父母那里，让它从花车上耸耸肩，并以正确的高度展示。 http://jsfiddle.net/h9GAZ/1/

优点：没有额外的加价，而且更加整洁。适用于IE6 +

缺点：需要无效的CSS以确保IE6和7中的一切都很好。

注意：IE6和7宽度自动用于防止宽度为100％+填充，而在较新的浏览器中则不然。

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

这些修补程序可以恢复到支持最低的浏览器，全局使用率超过1％（IE6），这意味着使用：之后不会删除它。

隐藏溢出确实显示内容，但不会阻止元素崩溃，因此不会回答问题。使用内联块可能会产生错误结果，孩子有奇怪的边距等等，表格要好得多。

设置高度可以“防止”崩溃，但这不是一个正确的修复。

无效的css

无效的CSS从不伤害任何人，事实上，它现在已经成为常态。使用浏览器前缀与使用浏览器特定的黑客一样无效，并且不会影响最终用户。

总结

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

Answer 2

摆脱最小高度：100％。这意味着div的最小高度是浏览器高度的100％。消除这种情况应该使其适合内容

<div>包装动态高度</div>

2 个答案:

解决方案一：清除：两者

解决方案二： display：table

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

无效的css

总结