7

HTML/CSSに関してはかなり未熟なので、助けてください。

私は次のレイアウトを持っています

<style>
#main {background-color: red; width: 30%;}
#right_al{float: right;}
#to_scroll{overflow: scroll;}
</style>

<div id='main'>
    <div id='right_al'>
        CONTENT#foo
        <div id='to_scroll'>
        ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />
        ZZZ<br />ZZZ<br />ZZZ<br />
        </div>
    </div>
    <div id='div1'>CONTENT #1</div>
    <div id='div2'>CONTENT #2</div>
    <div id='div3'>CONTENT #3</div>
    <div id='div4'>CONTENT #4</div>
    <div id='div5'>CONTENT #5</div>
</div>

overflow: scroll内部は#to_scroll私が欲しいものを示すことです、それはうまくいきません。親の#right_al境界を越えてフロートをクリアすると、親のサイズが大きくなりますが、これは望ましくありません。

jsFiddle リンク: http://jsfiddle.net/5ycnw/

私が欲しいのは

  • div1 から div5 は、親の内側の左側にあります。
  • 左側の div は、親 div が伸びる最大の高さを決定します。右にフロートされた div には#to_scroll、コンテンツがオーバーフローしたときにスクロールする子があり#mainます。

私が思いついた解決策には、の高さを修正することが含まれますright_alが、親の高さ#mainは左の div の内容に左右され、CSS のみの解決策が必要です。

前もって感謝します。

4

2 に答える 2

2

上記のコメントで述べたように、W3C 仕様では、高さが指定されていない場合、コンテナーの内部の高さを使用して全体の高さを定義するため、コンテナーのスクロールは許可されません。少しの JS コードを使用するオプションがある場合は、次の Fiddle をご覧ください。

http://jsfiddle.net/Moonbird_IT/kf3vD/

デモで使用した HTML 構造は次のとおりです。

<div id="main">
<div id="main-column">...</div>
<div id="side-bar">
  <div id="side-bar-header">
  Sidebar Header
  </div>
  <div id="side-bar-scroller">
      <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>        
          <li>Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>                
          <li>Option 7</li>
          <li>Option 8</li>
          <li>Option 9</li>  
          <li>Option 10</li>
          <li>Option 11</li>
          <li>Option 12</li>               
      </ul>
  </div>

</div>

</p>

ドキュメントが完全に読み込まれると、左要素 (メイン コンテンツ要素) の高さ情報を使用して、サイド バー内のスクロール要素の高さから、サイドバーのタイトルを表示するために必要な高さを差し引いた値が設定されます。

重要な部分は、次の短い jQuery 命令です。

$(document).ready(function() {
  var mainHeight=$('#main-column').height();    
  var sidebarHeaderHeight=$('#side-bar-header').height();    
  $('#side-bar-scroller').css('height', mainHeight-sidebarHeaderHeight);
});​

私はChromeでのみコードをテストしたので、微調整が必​​要になるでしょう:-)

于 2012-12-19T21:12:57.940 に答える
0

「コンテンツ」の div の周りにラッパーを置き、左のフロートを与えます。

<div id="content-container">
    <div id='div1'>CONTENT #1</div>
    <div id='div2'>CONTENT #2</div>
    <div id='div3'>CONTENT #3</div>
    <div id='div4'>CONTENT #4</div>
    <div id='div5'>CONTENT #5</div>
</div>


// CSS

#content-container { float:left; }
#main { height:auto; }

メイン タグを閉じる前に、CSS クリアを実行します。これを追加：

<div style="clear:both"></div>
于 2012-12-19T12:41:48.853 に答える