Question

http://jsfiddle.net/YZdv4/50/继承了jsfiddles

更新：我认为你可以用绝对定位和javascript做到这一点;但是，有没有使用css / floats的解决方案？

很抱歉，如果这很难理解，但我想通过使#content col 100％父亲background:papayawhip的高度来使紫色bg #right转向#content 1}}

 <div id="container" class="cf">
    <div id="header">
        <p>im header</p>
    </div>
    <div id="content" class="cf">
        <div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis.
</P></div>
        <div id="right">
            <img src="http://vvcap.net/db/0ggWsnKKw1FI1w0xojUT.png" />
            <img src="http://vvcap.net/db/Rik9UwaQOUuhKpML16td.png" />    


        </div>                        


    </div>
    <p>im the container</p>
</div>


   div#container{background:yellow;min-height:500px;}
div#header{background:pink; height:100px;}
div#content{position:relative;background:purple; height:100%;}/*heres parent container*/

div#content #left{float:left; height:100%; background:#222; color:#fff;width:50%;}
div#content #right{float:left; height:100%; background:papayawhip;width:50%;}
div#content #right img{}
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Answer 1

背景结束，因为它是内容的结尾（浮动的怪癖之一）。我发现为papayawhip背景填充整个紫色背景的唯一方法是在其底部添加填充。例如padding-bottom: 25%;或任何％的作品。

Answer 2

我不确定我到底知道你到底发生了什么，但我对这个问题的解释导致了这个结果：小提琴，http://jsfiddle.net/grE5A/62/

我只在这里粘贴了更改过的CSS元素。

HTML

  <div id="container" class="cf">
        <div id="header">
            <p>im header</p>
        </div>
        <div id="content" class="cf">
             <div id="right">
                <img src="http://vvcap.net/db/0ggWsnKKw1FI1w0xojUT.png" />
                <img src="http://vvcap.net/db/Rik9UwaQOUuhKpML16td.png" />    


            </div>               

            <div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis.
    </P></div>



        </div>
        <p>im the container</p>
    </div>

CSS

/*heres parent container*/

div#content #left {
    float: none;
    height: 100%;
    background: #222;
    color: white;
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

div#content #right {
    float: none;
    height: 100%;
    background: 
    papayaWhip;
    width: 50%;
    position: relative;
    padding-left: 50%;
    z-index: 0;
}

Answer 3

有一个问题：

孩子，DIV#left将无法使用父DIV的最小身高来计算自己的身高

div#container{background:yellow;min-height:500px;}

这就是为什么它不会延伸到DIV#content的底部。

编辑：

我并不总是建议用于布局的表格，但是当我这样做是为了这样的问题。

http://jsfiddle.net/YZdv4/56/

获取“虚假”列以跨越父级的高度

3 个答案: