SOURCE

Question

我的页面看起来像这样

<div id="wrapper">
    <div id="header"></div>
    <div id="main"></div>
</div>

标题有一个固定的高度。
主div有背景图像。

我希望显示主div以填满整个屏幕，以便图像显示在最底部。

所以我做了：

div#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);

    height:100%;
    min-height:100%;
}

这不起作用，如何设置div高度以填满整个屏幕？

另一种解决方案是将图像设置为正文：

body {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);
}

这里我遇到了问题，滚动时图像没有固定在底部。它实际上固定在窗户大小的高度。

background-attachment: fixed;也不是解决方案，因为背景图像根本不会滚动。

澄清

当内容太大时=＆gt;有一个滚动条，背景图像不再固定在底部。这是主要问题。它只是身体的背景颜色

@AndreaLigios

这就是我的意思：

SOURCE

在http://themelandia.ilijatovilo.ch上查看调整窗口大小，直到内容变大，然后向下滚动。
希望你会明白我的意思。

Answer 1

已更新（r5）

我使用其他div来包含背景，将其position设置为fixed并将z-index设置为-1;

#bg-trick {
    background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
    position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

此处的演示更新http://jsbin.com/idubom/5/edit

Answer 2

使用身体技术，但在div造型上......将以下内容添加到你的风格......

#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url); 
    background-attachment: fixed;
}

Answer 3

首先需要将父元素的高度设置为100％，以使子元素能够拉伸至100％

将html，body和#wrapper的宽度和高度设置为100％，如下所示：

html, body, #wrapper
{
  height:100%;
  width:100%;
}

现在在#wrapper中应用背景图像（建议使用#wrapper而不是#main，但如果从顶部剪切的图像的某些部分困扰你，那么使用#main）

Here是jsfiddle中的一个示例。

Answer 4

请查看更新后的[DEMO] 1 。这就是你要找的东西。

<强>描述：

    div#wrapper{
    height: 100%;
    min-height: 100%;
    width: 100%;
    background-color: red;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
    position:absolute;
    bottom:0;
}
div#header {
    height:80px;
    background-color:green;
}

div#main {
    padding: 60px 0px;
    min-height: 200px;
    bottom: 0;
}
div#contentWrap,div#headerWrap {
    width:960px;
    margin:0 auto;
    text-align:center;
}

**关键点是在包装器上添加位置绝对/固定。

要以全宽显示图像，您需要将身体称为100％的高度。在您的代码中，Rest似乎很好。

此处也已更新DEMO可能这就是您要找的内容。

Answer 5

编辑：基于您网站的最终解决方案：

添加

overflow: auto;
position: fixed;

到div＃wrapper rule。

编辑：

新解决方案：http://jsfiddle.net/SxPyW/2/

添加了top: 0;，padding-top: 100px;和z-index: 1;

你是说这个吗？

演示：http://jsfiddle.net/SxPyW/

使用绝对定位，但滚动页面时图像向上滚动（不是fixed行为）？

#main {  
   /* ... your stuff... */
    border: 2px solid blue;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
}

（插入边框以显示边界，它们在此处相互重叠，如果您需要边框，则相应地调整top属性）

Answer 6

你已经给你的div增加了100％的高度，另外在你的div中添加了一个innerHTML，因为空div会产生这样的问题。

document.getElementById('my_empty_div').innerHTML = '&nbsp';

希望有所帮助。

Div应该填充高度

澄清

SOURCE

6 个答案: