0

只是一个简单的结构。试图让我的内容包装器具有左右边框并拉伸 100% 的高度。看起来很简单，但不起作用。我错过了什么吗？

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

//标题

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

//页脚

        <?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;
}

谢谢

4

1 回答 1

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 */
}
于 2013-05-19T20:36:36.510 回答