html - 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>

我做错了什么吗？

Answer 1

当您将 height: 100%; 设置为 relative 时，这意味着 #container 的高度应为 100% 与 container id 的父级相关，在本例中应为 body。

设置 body,html{height:100%} 应该可以!

例如

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

如果你必须给

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

然后

#wrapper
{
 height:100%;
}

是必须的!