Question

只是一个简单的结构。尝试使我的内容包装器具有左右边框并且伸展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;
}

感谢

Answer 1

这是制作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 */
}

如何让我的内容达到100％的高度？

1 个答案: