CSS - 自动调整div高度？

Question

我有一个主容器，整个网站都是围绕它构建的。

在容器内部，除了所有标题、文本和页脚等内容之外，我还有一些可扩展的 div，可以向上或向下滑动，因此需要将容器的总高度调整为已展开 div 的大小。

现在，我以前做过这个，只需使用：height:100%，但由于某些原因，这会导致容器的边框效果消失。它似乎只能使用固定高度，如：height:1000px。

CSS:

   #container {
        position: relative;
        top: 5px;
        width: 980px;
        height: 100%;
        margin: 0 auto 0;
        box-shadow: 0 0 5px rgba(159,159,159,0.6);
        -o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
        -webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
        -moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
    }

HTML：（与此类似）

<div id="container">
  <div id="top-banner">
    <div id="logo"></div>
  </div>
  <div id="col1">text+expandable divs</div>
</div>

我做错了什么吗？

- MRC

---

我们需要看到 html。 - Phil

可能是Auto height of div的重复问题。 - emerson.marini

div 的自然行为总是自动扩展，除非你对它进行了错误的操作。 - emerson.marini

你的 container 的 height 属性被设置为 100%。但是你知道它的父元素也需要声明 height 属性吗？ - emerson.marini

@MelanciaUK div 的默认行为是自动折叠（至少在我们谈论 height 时是这样）。 - Michał Rybak

不是重复的。@MelanciaUK 没有理解问题。 - MRC

Answer 1

当您将height: 100%;设置为relative时，这意味着相对于#container id的父元素，即在此情况下应为body，#container应具有100%的高度。

设置body,html{height:100%}，这样应该就可以了！

例如

<div id="wrapper">
  <div class="container">
  </div>
</div>

如果您必须提供

.container
{
  height: 100%; 
  position: relative
}

那么

#wrapper
{
 height:100%;
}

是必须的！

- NoobEditor

---

谢谢你的回答。我现在理解得更好了。你给出的解决方案有效，但是底部被切掉了一点。我猜这可能与我的页脚有关，所以我会添加一些边距/填充，看看是否有帮助。 - MRC

Answer 2

它消失了，因为在100%值下，您的容器高度与body标签相同。所以您需要扩展您的body和html标签，如下所示：

html{
   height: 95%;
}
body{
   height: 95%;
} 
#container {
    position: relative;
    top: 5px;
    width: 980px;
    height: 100%;
    margin: 0 auto 0;
    box-shadow: 0 0 5px rgba(159,159,159,0.6);
    -o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
    -webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
    -moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
}

在某些浏览器上，您需要添加min-height:95%。

这是解决方案：http://jsfiddle.net/axv5j/

- Alexandre Tranchant

---

谢谢yochannah。抱歉，我不擅长英语。 - Alexandre Tranchant

Answer 3

添加了一个包装器，并将HTML和body设置为100%高度：

html, body {
    height: 100%;
}
#wrapper{
    height:100%;    
}

然后添加：

    padding-bottom:150px;

将容器大小增加到足以覆盖内容。

- MRC