css - 将带有背景图像的 div 设置为 100% 高度-6ren

css - 将带有背景图像的 div 设置为 100% 高度

转载作者：太空宇宙更新时间：2023-11-04 04:48:07

我想为页面内容设置背景。带有背景图像的 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-

最佳答案

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

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

向 history 元素添加一个 clearfix。

溢出:隐藏

或

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

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

关于css - 将带有背景图像的 div 设置为 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14034939/