0

我有一个包含 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;

包装器由上层菜单 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 {
       position: fixed;
       top: 0px;
       width: 1000px;
       height: 100px;
       margin: auto;
       background: #004465;
       z-index: 5;
}
#container {
     width: 1000px;
     min-height: 100%;
     margin: auto;
}
4

2 回答 2

2

解决方案一：明确：两者

添加样式为 clear:both 的块元素；到它上面会清除经过该点的浮动并阻止该元素的父元素折叠。http://jsfiddle.net/TVD2X/1/

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

缺点：需要另一个标签来清除浮动、膨胀标记。

注意：要回退到 IE6 并让它在禁欲的父母（即输入元素）上工作，您不能使用 :after。

解决方案二：显示：表格

添加显示：表格；给父母以使其摆脱浮动并以正确的高度显示。http://jsfiddle.net/h9GAZ/1/

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

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

注意：IE6 和 7 的宽度自动用于防止宽度为 100%+padding，在较新的浏览器中并非如此。

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

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

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

设置高度确实“防止”了崩溃，但这不是一个正确的解决方法。

无效的 CSS

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

综上所述

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

于 2012-10-18T19:56:09.160 回答
0

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

于 2012-10-18T19:41:31.627 回答