我的页面是这样的
<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
调整窗口大小直到内容变大,然后向下滚动。
希望你会明白我的意思。
最佳答案
编辑:基于您网站的最终解决方案:
添加
overflow: auto;
position: fixed;
到你的 div#wrapper 规则。
编辑:
新解决方案:http://jsfiddle.net/SxPyW/2/
添加了 top: 0;
, padding-top: 100px;
和 z-index: 1;
你是这个意思吗?
使用绝对定位,但在滚动页面时图像向上滚动(不是固定
行为)?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(插入边框以显示边界,它们在这里相互重叠,如果您需要边框相应地调整 top
属性)
关于html - Div应该填充高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14380266/