html - 获取 "faux"列以跨越父级的高度

Question

http://jsfiddle.net/YZdv4/50/这是 jsfiddles

更新:我认为您可以使用绝对定位和 javascript 来做到这一点；但是，是否有仅使用 css/floats 的解决方案？

抱歉，如果这很难理解，但我正在尝试通过制作 #right 让紫色背景 #content 变成 background:papayawhip col 父级的 100% 高度 #content

 <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

我不确定我是否确切知道你在寻找什么，但我对这个问题的解释导致了这个结果:fiddle, 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;
}