0

私の問題は、このフィドルによって示されています: http://jsfiddle.net/pschyska/HAPLU/

<div class="main">
  <div class="header">header</div>
  <div class="navigation">nav<br>nav<br><nav<br>nav<br></nav<br></div>
  <div class="col1 col-collapsed">col1<br><br></div>
  <div class="dynamic">
    <div class="col2 col-large">
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
        col2<br><br>col2<br><br>col2<br><br>col2<br><br>col2<br><br>
    </div>
    <div class="col3 col-large">col3</div>
  </div>
</div>

 .header {
   height: 20px;
 }

 .main {
   height: 100%;
   position: absolute;
   width: 100%;
 }

 .main .navigation {
   position: absolute;
   height: 100%;
   width: 50px;
 }

 .main .col-collapsed {
   position: absolute;
   left: 50px;
   height: 100%;
   width: 100px;
   overflow-x: hidden;    
   overflow-y: auto;
 }

 .main .dynamic {
   margin-left: 150px;
   height: 100%;
 }

 .main .col-large {
   height: 100%;
   width: 50%;
   float: left;
   overflow-x: hidden;    
   overflow-y: auto;

 }

 .main {
   background-color: #5555ee;
 }

 .header {
   color: white;
   background-color: black;
 }

 .navigation {
   background-color: blue;
 }

 .col1 {
   background-color: #aaaa00;
 }

 .col2 {
   background-color: #00ffbb;
 }

 .col3 {
   background-color: #ff00bb;
 }

 .dynamic {
   background-color: #5af00a;
 }

ヘッダーの高さを固定し、最初の 2 列 ( .navigation、.col1) を固定幅にする必要があります。次の 2 つの列は、残りの水平方向のスペースを均等に共有する必要があります。4 つの列.navigation, .col1, .col2,はすべて.col3「100%」である必要があり、実際には「100% からヘッダーの高さを差し引いた値」です。私は彼を働かせませんでした。列の高さは常にドキュメントの高さと同じで、ヘッダーの高さと同じサイズの垂直スクロールバーが表示されます。

.dynamicおまけ: ネストされた属性はまったく好きではありません。セマンティックのない定型文です。それを行う別の方法はありますか？これがないと、各列は残りのスペースの 50% ではなく、ドキュメントの幅の 50% を占めることになります。

ありがとう

4

1 に答える 1

0

テーブルを試してはいけません。これがあなたの場合の生の構造です。固定幅が必要な td には width 属性を使用します。両方の残りの部分は、残りのスペースを均等に共有します。

    <div>
<table style="width:100%" border="1">
    <thead>
    <th colspan="4">This is header</th>
    </thead>
    <tbody>
    <tr>
    <td width="10%">col1</td>
    <td width="20%">col2</td>
    <td>col3</td>
    <td>col4</td>
    </tr>
    </tbody>
</table>
</div>
于 2012-11-14T14:41:23.760 に答える