1

ここで問題を再現しました。

問題は、「左」の div が「上」と「下」の右の div を合わせた高さと一致する必要があることです。さまざまなコンテンツの列で同じ高さを実現する方法に関する記事やチュートリアルを読んでいますが、「積み重ねられた」列には適用されないようです。

私の現在の非稼働ソリューションは、この記事から取られた概念に基づいて構築されています。

div の高さを最も高い列と等しくする唯一の方法は、その div にすべての列が含まれている場合です。これを別の方法で説明すると、列をコンテナー内に配置することで、コンテナーが最も高い列の高さになります。これは非常に便利な構造です。この構造がすべてのブラウザーで正しく機能するためには、コンテナー div を (左または右に) フローティングする必要があり、さらに各列コンテンツ div もフローティングする必要があります。どちらの方法でも構いません。

equalHeights jQuery プラグインとサイズ変更については承知していますが、CSS ソリューションを非常に好みます。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
      <div id='container'>  
        <div id='height-container'>
            <div id='left'>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nunc non semper fringilla, nibh mauris aliquam diam, sit amet suscipit purus ligula eu odio. Nulla tortor neque, sodales nec placerat vitae, laoreet a mi. In ac ullamcorper dui. Sed enim tellus, volutpat at tristique eu, condimentum volutpat tellus. Integer massa quam, egestas id vulputate id, ultrices ut felis. 
            </div>
            <div id='right'>
              <div id='top'>
                  Proin condimentum purus tortor, eu laoreet velit. Praesent ornare, mauris eu laoreet suscipit, nibh mauris imperdiet dolor, ut molestie erat tellus ac odio. Etiam tempor eros at neque tincidunt a feugiat massa imperdiet. Vestibulum aliquet nibh sit amet urna facilisis condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare dolor quis neque aliquet lacinia et id tortor. Fusce eu sapien non mi aliquet condimentum id vitae ante. Phasellus sit amet eros vitae velit fringilla facilisis non at eros. In non venenatis lectus. Nam tortor tellus, vehicula non vulputate vitae, mollis a velit. Pellentesque gravida pretium ante, eu volutpat risus viverra non. Duis purus quam, venenatis nec consectetur interdum, aliquam rutrum diam. Donec interdum odio eget ante consectetur in sodales mi molestie. Nunc bibendum, turpis vel vulputate accumsan, diam tortor placerat sem, sed posuere risus purus eu massa. Nullam eleifend pulvinar massa, nec cursus velit dictum quis. 
              </div>
              <div id='bottom'>
                   Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur. <br><br>
                  Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur.
              </div>
            </div>
        </div> 
    </div>        
    </body>
</html>

CSS:

body{
    text-align:justify;
}

#container{
    width:1000px;
    margin:0 auto;
}

#height-container{
    background:orange;
    float:left;
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    float:right;
}

#top{
    background:yellow;
    padding:20px;
}

#bottom{
    background:#00FF66;    
    padding:20px;
}
4

2 に答える 2

2

display:tableこれにはプロパティを使用できます。

#height-container{
    background:orange;
    display: table;
    vertical-align:top;
}

#left{
    display: table-cell;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    display: table-cell;
}

これをチェックしてくださいhttp://jsfiddle.net/6rBAw/2/

ただし、IE8以降までは機能します

更新しました

CSS

#left{
    width:200px;
    background:#CD5555;
}

#right{
    float:right;
    width:600px;
}
.clr{clear:both;}

HTML

<div id='right'></div>
<div id='left'>
  <div class="clr"></div>
</div>

確認してくださいhttp://jsfiddle.net/6rBAw/4/

于 2012-03-16T12:52:58.963 に答える
2

これはIE7でも機能するソリューションですhttp://jsfiddle.net/6rBAw/6/このソリューションは、負のマージンボトムとパディングボトムを使用します。唯一のことは、マージンボトムとパディングボトム値を指定する必要があることです。同じ大きな値で、列オーバーフローの非表示プロパティのコンテナを指定します。

#container{
    width:1000px;
    margin:0 auto;
    **overflow: hidden;**
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    **padding:20px 20px 99999px 20px;
    margin-bottom: -99999px;**
}

#right{
    width:600px;
    float:right;
    **padding-bottom: 99999px;
    margin-bottom: -99999px;**
    background-color: black;
    height: 1000px;
}
于 2012-03-16T14:07:01.363 に答える