0

親divのコンテンツに応じてdivの固定幅と動的高さが必要なアプリケーションの流動レイアウトに取り組んでいます。基本的に、サイドナビゲーション(side_nav)と「データ」div(app_forms)領域があり、サイドナビゲーションの幅は124pxに固定され、残りのボディ領域は%で定義されています。

私は2つの問題を抱えています

  1. 「app_forms」の div の高さに応じてサイド ナビゲーションの高さが増加しない

  2. ブラウザのサイズを変更すると、「apps_forms」div が壊れる

誰かがこれについて私を助けることができますか、私はこれをいじりました。

http://jsfiddle.net/y42F9/

<div class="app_body">

   <div class="side_nav">
        <ul>
         <li ><a href="#" >Environments</a></li>
         <li class="events"><a href="#">Events</a></li>
         <li class="admin"><a href="#">Admin</a></li>
         <li class="help"><a href="#">Help</a></li>
       </ul>
  </div>

 <div class="app_forms">
     <div class="datagrid">datagrid area</div>
     <div class="info" >record info</div>  
 </div>

</div>
4

1 に答える 1

3

ここで私のソリューションを見てください：http://jsfiddle.net/MdT6d/（ブラウザウィンドウのサイズを自由に変更してください）

html:

<div class="app_body">
    <div class="side_nav">
        <div>one</div>
        <div>two</div>
        <!-- as much content here as you want -->
    </div>
    <div class="app_forms">
        blah blah <!-- as much content here as you want -->     
    </div>
</div>
<div class="footer">footer</div>

CSS:

.app_body {
    width:100%;
    background-color: yellow;
}
.side_nav {
    width:122px;
    float:left;
    background-color: blue;

}
.app_forms {
    background-color: grey;
    margin-left: 122px;
}

.footer {
    height:38px;
    clear:both;
    background-color: red;
}

質問に直接関係のない、追加したdivを削除しました..トリックは、app_bodyにside_nav幅と同等の左マージンを与えるだけです..

基本的に、siden nav の高さは、app_body に追加するコンテンツの量に関係なく同じになります..しかし、side_nav の高さが app_body の高さとともに拡大しているかのように見せることができます..背景色を指定するだけです (または必要に応じて y 軸に沿って繰り返される背景画像)。

また、side_nav にさらにコンテンツを追加すると、自然に大きくなります。app_body の高さが大きくなると、app_body で同じトリックを実行できます。基本的には、side_nav と app_body の両方をラッパー div でラップし、 app_body と同じ背景色 (必要な場合) で、side_nav と共に高さも成長しているように見せます。

于 2013-02-11T10:37:22.803 に答える