如何让我的内容达到100%的高度?

时间:2013-05-19 20:33:41

标签: html css height

只是一个简单的结构。尝试使我的内容包装器具有左右边框并且伸展100%高度。看似简单但不起作用。我错过了什么吗?

<?php get_header(); ?>
    <div class="content_wrapper clearfix">
    </div>
<?php get_footer(); ?>

// HEADER

<body <?php body_class(); ?>>
        <div class="header clearfix">
            <div class="header_wrapper clearfix">
                <div class="logo_wrapper">
                    <div class="logo">
                    </div>
                </div>
            </div>
        </div>

// FOOTER

        <?php wp_footer(); ?>
    </body>


</html> 

// CSS

body {
 width:100%;
 height:100%;
 line-height: 1;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 font-weight:300;
}
.content_wrapper {
 width:960px;
 height:100%;
 margin:0px auto 0px auto;
 border-left:1px #ccc solid;
 border-right:1px #ccc solid;
}

.header {
 width:100%; 
 height:80px;
 background:#FFF;
 border-bottom:1px #ccc solid;
}
.header_wrapper {
 width:960px;
 margin:0px auto 0px auto; 
 height:80px;
 border-left:1px #ccc solid;
 border-right:1px #ccc solid;
}
.logo_wrapper {
 width:187px;
 height:63px;
 padding-top:8px;
}
.logo {
 width:187px;
 height:63px;
 background:url(../images/bit_ball_ai.png) no-repeat;
 margin-left:20px;
}

感谢

1 个答案:

答案 0 :(得分:0)

这是制作100%高度的绝佳方法:

#element {
  position: absolute;
  top: 0;
  bottom: 0;
}

这将使它填满所有可用空间,但如果它需要相对或静态定位,你就会像你一样:

#element {
  min-height: 100%;
}

如果这不起作用,那是因为其中一个父元素不是100%高度。从查看HTML看起来,似乎唯一的父元素是HTML和BODY,但是您只在BODY上定义了100%的高度,这仍然受到HTML的约束。因此,下一步是确保您的HTML和BODY元素都具有100%的高度:

html, body {
  height: 100%;
}

html > body > #element {
  height: 100%;
  /* more styles */
}