CSS - 自动div高度?

时间:2013-12-20 14:39:31

标签: html css

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

在容器内,除了所有标题,文本和&我有一些可扩展的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>

我做错了吗?

3 个答案:

答案 0 :(得分:4)

当您将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%;
}

是必须的!

答案 1 :(得分:1)

它消失了,因为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/

答案 2 :(得分:0)

添加了一个包装器,并将HTML,body设置为100%height:

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

然后补充说:

    padding-bottom:150px;

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