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

Question

#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%。

Answer 1

.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>

希望对你有帮助