CSS-自动div高度？

Question

我有一个主要容器，整个网站都基于该容器。

在容器内部，除了所有页眉，文本和页脚等。我有一些可扩展的div，它可以上下滑动，因此需要具有容器的整体高度以适应扩展的div的大小。

现在，我已经在使用高度：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>

难道我做错了什么？

Answer 1

当您设置为时height: 100%;，relative这意味着该值#container应100%相对于containerid 的父级具有高度，在这种情况下应为body。

设置 body,html{height:100%}，这应该工作！

例如

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

如果你必须付出

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

然后

#wrapper
{
 height:100%;
}

是必须的！