Question

我有一个整个网站所在的主要容器。

在容器内，除了所有标题，文本和＆amp;我有一些可扩展的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% id的父级相关的高度container，其中这种情况应该是body。

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

<强>例如

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

如果你必须提供

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

然后

#wrapper
{
 height:100%;
}

是必须的！

Answer 2

它消失了，因为100％的值，你的容器的高度与你的身体标签的高度相同。所以你必须像这样扩展你的身体和你的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/

Answer 3

添加了一个包装器，并将HTML，body设置为100％height：

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

然后补充说：

    padding-bottom:150px;

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

CSS - 自动div高度？

3 个答案: