0

私は2つのdivを持っています、これらの2つのdivは隣り合って配置する必要があります。基本的に状況は次のとおりです。

<div>
   <div id="divl" style="width:25%;height:100%;float:left;clear:none">Sidemenu</div>
   <div id="divr" style="width:75%;height:100%;clear:none">Content</div>
</div>

さて、私がしたいのは次のとおりです。それらを並べて配置することはできますが、問題があります。右のdivの高さは、左のdivに応じて異なります。つまり、右のdivのコンテンツによって、右のdivの高さが左のdivよりも高くならないようにする必要があります。右のdivコンテンツがオーバーフローしています。

全高は左のdivで決まり、右のdivは結果的に調整する必要があります。

それだ！。これを行う方法？プレーンなxhtmlは可能ですか？またはjQueryが必要ですか？ありがとう

4

3 に答える 3

1

別の方法として、これはjQueryを使用して簡単に達成できます。

マークアップの例 

  <div id="navigation">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>

  <div id="content">Page content here!</div>

jquery

$('#content').height($('#navigation').height());

編集

上記のjQueryがDOMready関数に入れられていることを確認してください。入れていない場合、コードは実行されません。

$(document).ready(function() {
  $('#content').height($('#navigation').height());
});

これがフィドルです

于 2012-10-14T18:19:04.860 に答える
0

ここにいくつかの良い方法とそれらのさまざまなデモがあります。これはCSSトリックから取られた例です：

<div id="one-true" class="group">
    <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
    <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
    <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

#one-true { overflow: hidden; }
#one-true .col {
    width: 27%;
    padding: 30px 3.15% 0; 
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */
于 2012-10-14T18:08:10.183 に答える
0

親divの高さを単純に制御した場合はどうなりますか？これにより、親divの高さを制御するだけで、2つのdivの高さが一致するように見えます。

http://jsfiddle.net/ccLBy/

于 2012-10-14T18:20:44.360 に答える