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

Question

这个 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;
 }

我需要标题固定高度，前两列(.navigation, .col1)固定宽度。接下来的 2 列应平均共享剩余的水平空间。 .navigation, .col1, .col2, .col3 这4列都必须是“100%”，实际上“100% 减去页眉高度”。我没有让他工作。列高始终等于文档高度，我得到一个与标题高度大小相同的垂直滚动条。

好处:我根本不喜欢那个嵌套的 .dynamic 属性。这只是没有语义的样板。还有另一种方法吗？如果没有它，每列将占据文档宽度的 50%，而不是剩余空间的 50%。

谢谢

Answer 1

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