0

左右の列の両方に、高さが異なる 2 つのネストされた div があります。
これらの div はフレームのような形状を形成します。http://jsfiddle.net/5fA3q/を参照してください。

私はさまざまな css equal-height-tricks を試しましたが、それらは機能しますが、この状態では機能せず、ほとんど機能し、短い内部 div
padding-bottom:999999px;
margin-bottom:-999999px;
をabsolute配置するようになりました。

しかし、残念ながら、padding-bottomはなくなりました。http://jsfiddle.net/5fA3q/11/を参照してください

誰かが回避策を知っていることを願っています。

4

1 に答える 1

0

を使用できますdisplay:table-cellが、古いブラウザでは動作しないことに注意してください。

HTML:

<div class="wrapper">
    <div class="left">
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>           
    </div>
    <div class="separator"></div>
    <div class="right">
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
    </div>
</div>
<div class="footer"></div>

CSS:

.wrapper{
    width: 500px;
    display:table;
}
.wrapper>div{display:table-cell;}
.left{
    border:10px solid #0188ed;
    margin-right:10px;
    background: #0150e1;
    width: 180px;   
}
.right{
    width:270px;
    border:10px solid #0188ed;
    background: #0150e1;
}
.footer{
    background:#0181ec;
    height: 50px;
    width: 500px;
    border-top: 10px solid #ffffff;
}

デモ: http://jsfiddle.net/5fA3q/12/

于 2012-09-05T15:11:17.290 に答える