背景div根据包含的元素调整高度

时间:2013-11-18 09:55:56

标签: css css-float

我确定我错过了一些显而易见的东西,但我无法让它发挥作用:

这是“有效”,但仅限于有限的情况(例如):

<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:''}

2 个答案:

答案 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;
}

http://jsfiddle.net/V66HW/1/

答案 1 :(得分:0)

在我看来,如果您希望相应地调整大小,请在主容器上设置背景。 <div class="containerBK"></div> <!-- the background container-->位于将根据内容调整大小的容器之上,因此永远不会调整。