0

My problem is demonstrated by this fiddle: 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;
 }

I need the header to be fixed height, and the first 2 columns (.navigation, .col1) to be fixed width. The next 2 columns should share the remaining horizontal space evenly. All 4 columns .navigation, .col1, .col2, .col3 must be "100%", actually "100% minus header-height". I didn't get his to work. The columns height is always equal to the document height, and I get a vertical scrollbar the same size as header height.

Bonus: I don't like that nested .dynamic attribute at all. It's just boilerplate without semantic. Is there another way to do it? Without it, the columns would take 50% of the document's width, not 50% of the remaining space each.

Thanks

4

1 回答 1

0

你不要尝试桌子。这是您的情况的原始结构。对需要固定宽度的 td 使用宽度属性。两者的其余部分将平均共享剩余空间。

    <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 回答