0

http://jsfiddle.net/YZdv4/50/ こちらがjsfiddlesです

更新：絶対ポジショニングとJavaScriptでこれを実行できると思いました。しかし、css / floatを使用するだけの解決策はありますか？

これが理解しにくい場合は申し訳ありませんが、親の高さを100％にすることで、紫色のbg#contentを回転させようとしています。background:papayawhip#right#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;
}

</ p>

</ p>

4

3 に答える 3

0

コンテンツの終わり（フロートの癖の1つ）であるため、背景は終了します。papayawhipの背景が紫色の背景全体を塗りつぶすために私が見つけた唯一の方法は、その下部にパディングを追加することです。など、padding-bottom: 25%;または％が機能するものは何でも機能します。

于 2012-05-26T06:24:44.730 に答える
0

あなたが何を求めていたのか正確にはわかりませんが、質問を解釈すると、この結果が得られます：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;
}
于 2012-05-26T06:51:25.390 に答える
0

問題がある：

子はDIV#left、親DIVの最小の高さを使用して自分の高さを計算することはできません

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

これが、の下部まで伸びない理由ですDIV#content。

編集：

私はいつもレイアウト用のテーブルを提案するわけではありませんが、私がそうするとき、それはこのような問題のためです。

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

于 2012-05-26T12:12:17.007 に答える