Question

我一直在阅读很多条目，以弄清楚为什么我的内容不会强制身体和html标签伸展到内部内容高度的100％。

我的页面在这里：http://truerenaissance.devmu.com/artisthighlight/

您会看到背景图片（在body标签上设置）未拉伸到页面的100％或内容的高度。我只使用职位：相对无处不在。我也在内容的底部使用'clearfix'。如果有人对于为什么会发生这种情况有任何想法，我会非常感激。

html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; }
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75);
        padding: 0px; z-index: 10; }
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; }
.clear:before,
.clear:after {
    content:"";
    display:table;
}
.clear:after {
    clear:both;
}
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; }

<html>
  <body>
    <div id="body-wrapper">
      <div id="site-wrapper">
       <div class="inner">
       </div>
      </div>
    </div>
  </body>
</html>

谢谢！

Answer 1

您将身高限制在视口高度，并且没有垂直拉伸背景。从height: 100%和html移除body并使用background-size的{{1}}值。

顺便说一句，感谢大图片。

CSS html和body容器没有扩展到内容的高度

1 个答案: