0

我的页面看起来像这样

<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;也不是解决方案，因为背景图像根本不滚动。

澄清

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

@AndreaLigios

这就是我的意思：

在此处输入图像描述

来源

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

4

6 回答 6

1

更新 (r5)

我使用另一个div来包含背景，将其设置为position-1 ；fixedz-index

#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

于 2013-01-17T13:35:46.760 回答
1

使用 body 技术，但在 div 样式上...将以下内容添加到您的样式中...

#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url); 
    background-attachment: fixed;
}
于 2013-01-17T13:36:52.653 回答
1

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

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

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

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

这是 jsfiddle 中的示例。

于 2013-01-17T13:44:46.490 回答
1

请查看更新后的[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;
}

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

要以全宽显示图像，您需要将 body 设置为 100% 的高度。在您的代码中，休息对我来说似乎很好。

这里也更新了DEMO可能这就是你要找的。

于 2013-01-17T13:48:25.500 回答
1

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

添加

overflow: auto;
position: fixed;

到您的 div#wrapper 规则。

编辑：

新解决方案：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相应地调整属性）

于 2013-01-17T13:54:12.963 回答
-2

您已经为您的 div 指定了 100% 的高度，另外向您的 div 添加了一个 innerHTML，因为空 div 会产生此类问题。

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

希望有帮助。

于 2013-01-17T13:38:57.237 回答