Question

这个小提琴证明了我的问题： 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％。

由于

Answer 1

你不试试表。这是您案例中的原始结构。对于要固定宽度的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>

摆脱固定宽度/流体混合布局中的滚动条

1 个答案: