html - 如何使用百分比将页面分为两个区域(div)

#container {
  position: absolute;
  width: 100%;
  overflow-y: scroll;
  top: 30px;
  table {
    margin-bottom: 0;
  }
  th {
    //max-width: 150px;
    word-wrap: break-word;
  }
  td {
    max-width: 100000px;
  }
}

#down_container {}

<div id="container">
  <p>
    this div (with table) should has 70% screen and top = 30px;

  </p>
  <table border="1">
    <tr>
      <th>Short fs [dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Short fs[dsadas]</th>
      <th>Very long long long long long</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Longlonglong</td>
      <td>Long long long</td>
      <td>Short Header</td>
      <td>Long long long</td>
      <td>Long long long</td>
      <td>Short Header</td>
      <td>Long long long</td>
      <td>Long long long</td>
      <td>Short Header</td>
      <td>Long long long</td>
      <td>Long long long</td>
      <td>Long long long long long</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Longlonglong</td>
      <td>Long long long</td>
      <td>Short Header</td>
      <td>Long long long</td>
      <td>Long long long</td>
      <td>Short Header</td>
      <td>Long long long</td>
      <td>Long long long</td>
      <td>Short Header</td>
      <td>Long long long</td>
      <td>Long long long</td>
      <td>Long long long long long</td>
    </tr>
    <tr>
      <tr>
        <td>1</td>
        <td>Longlojjjjjjjjjjjnglong</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Longlonglonglonglong</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Longlojjjjjjjjjjjnglong</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Long long long long long</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Longlonglong</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Long long long long long</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Longlonglong</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Long long long long long</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Longlonglong</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Short Header</td>
        <td>Long long long</td>
        <td>Long long long</td>
        <td>Long long long long long</td>
      </tr>
  </table>
  <div id="down_container">
    <p>
      this div should has own srollback (left-up) and (right-left) and should has 30% screen

    </p>

  </div>
</div>

您能帮我将这些div分为两个部分（上和下）吗？我想分配的比例等于70%:30%。

最佳答案

.left{
  float:left;
  width:70%;
  overflow-x:auto;
  white-space: nowrap;
}
.right{
  float:left;
  width:30%;
  overflow-x:auto;
  white-space: nowrap;
}
.clearfix{
  clear:both;
}

<div class="left">
  <table>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </table>
</div>
<div class="right">
  <p>....</p>
</div>
<div class="clearfix"></div>

希望对你有帮助