我确定我错过了一些显而易见的东西,但我无法让它发挥作用:
这是“有效”,但仅限于有限的情况(例如):
<div class="containerBK"></div> <!-- the background container-->
<div class="somepagecontainer">
<div class="userDetails">
<div>some component</div>
<div>another</div>
<div>more</div>
<div> some div that may or may not exist and with it's height varying</div>
</div> <!--end user div-->
<div class="left_column"></div>
<div class="right_column"></div>
</div> <!--end of somepagecontainer-->
CSS:
.containerBK {
width: 99%;
height: 435px;
background-image: url('../img/texture.png');
z-index: -1;
position: absolute;
top: 60px;
height:400px; /* hard coding the height! the problem */
}
.somepagecontainer {
width:1024px /*setting the page text width*/
}
.userDetails {
overflow:hidden /*EDIT: So it would have a height, contains only floats*/
}
这为页面的上半部分(在userDetails下)提供了一个很好的整页宽度背景。问题是userDetails的高度不同,并且动态变化,所以我需要背景来相应地调整大小。但如果我将containarBK
移动到主容器中,宽度将变为1024px容器的99%,并且我将两边都空了..
我很乐意为此提供帮助!
编辑:我添加了关于.userDetails类的说明
更新:缺少的部分是将overflow hidden
更改为:after{clear:all, content:''}
答案 0 :(得分:1)
您必须将background-div放在userDetails-Div。
中然后你必须给userDetails Div提供“position:relative”。给出背景图像div位置:绝对;并将其定位为从父div的顶部到底部覆盖。
要让background-div到达userDetails-Div的左右两侧,你必须给它margin-left:-9999px;和保证金权利:-9999px; (任意但很高的数字)。
但是你必须给body元素赋予“overflow-x:hidden”,否则你会看到带有这个解决方案的滚动条。
工作示例:
<div class="wrapper">
<div class="userDetails">
<div class="background-image"></div>
<div>some component</div>
<div>another</div>
<div>more</div>
<div> some div that may or may not exist and with it's height varying</div>
</div>
<div>Other content here</div>
</div>
和CSS:
body {
overflow-x: hidden;
}
.background-image {
background-image: url(http://subtlepatterns.com/patterns/wild_flowers.png);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
margin-left: -9999px;
margin-right: -9999px;
}
.wrapper {
width: 600px;
margin: 0 auto;
}
.userDetails {
padding: 10px 0;
margin-bottom: 50px;
position: relative;
}
答案 1 :(得分:0)
在我看来,如果您希望相应地调整大小,请在主容器上设置背景。 <div class="containerBK"></div> <!-- the background container-->
位于将根据内容调整大小的容器之上,因此永远不会调整。