Question

我想为页面内容设置背景。带背景图片的div为class=history。 “历史”和历史本身之上的所有div都将高度设置为100％。但是，“历史”div没有达到正确的高度。

以下是代码示例。我可能会遗漏一些相关细节，但会在找到解决方案后添加它们。另请参阅the live page。

CSS：

html, body {
    height: 100%;
    background: url(cream_dust.png) repeat 0 0;
}

HTML：

<html>
<body class="page page-id-41 page-child parent-pageid-8 page-template-default logged-in admin-bar">
<div class="wrapper-for-footer">
<div id="page" class="hfeed site">
<div id="main" class="site-main">
<div id="primary" class="content-

Answer 1

设置为height: 100%的元素只占其父级的垂直空间的100％。如果history和body之间的某个元素没有高度，那么它就不会像您期望的那样高。

history元素的大部分是浮动内容，因此它已折叠为仅包含非浮动内容。

向history元素添加clearfix。

overflow: hidden

或

.history {
    zoom: 1; // fix for IE
}

.history:after {
    content: ' ';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Answer 2

您可能需要将position:absolute;添加到试图给予100％身高的div。

编辑：您需要将position:absolute;添加到history div

将背景图像的div设置为100％高度

2 个答案: