html - Div应该填充高度

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

---

澄清

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

---

@AndreaLigios

这就是我的意思:

来源

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

Answer 1

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

添加

overflow: auto;
position: fixed;

到你的 div#wrapper 规则。

---

编辑:

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

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

---

你是这个意思吗？

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

使用绝对定位，但在滚动页面时图像向上滚动(不是固定行为)？

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

(插入边框以显示边界，它们在这里相互重叠，如果您需要边框相应地调整 top 属性)