html - 如果css中有margin-left，我如何使div的宽度直到页面的右端

Question

我正在制作一个包含两个主要 div 的页面。其中一个显示页面的内容，另一个是选项菜单。
选项菜单是页面左侧的固定 div。它具有 180 像素的固定宽度。内容 div 的左边距为 200 像素（因为选项 div 的填充为 10 像素）。在内容 div 中有一个很长的表格，对于页面来说太长了。内容 div 应该完全缩放到页面的末尾，但我不知道如何。

我希望你明白我的意思，如果有人可以提供帮助，我会很高兴！

Edit:内容 div 应该有一个“溢出：滚动；” 然后。

.options{
  padding: 10px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 180px;
  background-color: yellow;
}

.content{
  margin-left: 200px;
}

table{
  border-collapse: collapse;
 }
 
 td{
  padding: 10px;
 }

<div class="options">
  <h1>Options</h1>
  <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

<div class="content">
  <h1>Content</h1>
  <table border>
    <tr>
      <td>
        Example Text 1
      </td>
      <td>
        Example Text 2
      </td>
      <td>
        Example Text 3
      </td>
      <td>
        Example Text 4
      </td>
      <td>
        Example Text 5
      </td>
      <td>
        Example Text 6
      </td>
      <td>
        Example Text 7
      </td>
      <td>
        Example Text 8
      </td>
      <td>
        Example Text 9
      </td>
      <td>
        Example Text 10
      </td>
      <td>
        Example Text 11
      </td>
      <td>
        Example Text 12
      </td>
      <td>
        Example Text 13
      </td>
      <td>
        Example Text 14
      </td>
      <td>
        Example Text 15
      </td>
      <td>
        Example Text 16
      </td>
      <td>
        Example Text 17
      </td>
      <td>
        Example Text 18
      </td>
      <td>
        Example Text 19
      </td>
      <td>
        Example Text 20
      </td>
      <td>
        Example Text 21
      </td>
      <td>
        Example Text 22
      </td>
      <td>
        Example Text 23
      </td>
      <td>
        Example Text 24
      </td>
      <td>
        Example Text 25
      </td>
      <td>
        Example Text 26
      </td>
      <td>
        Example Text 27
      </td>
      <td>
        Example Text 28
      </td>
    </tr>
  </table>
</div>

标签： htmlcss

Answer 1

您可以使用calc()来计算内容 div 的宽度，在这种情况下它是calc(100% - 200px)然后添加overflow: auto到它。

演示：

.options{
  padding: 10px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 180px;
  background-color: yellow;
}

.content{
  margin-left: 200px;
  width: calc(100% - 200px);
  overflow: auto;
}

table{
  border-collapse: collapse;
 }
 
 td{
  padding: 10px;
 }

<div class="options">
  <h1>Options</h1>
  <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

<div class="content">
  <h1>Content</h1>
  <table border>
    <tr>
      <td>
        Example Text 1
      </td>
      <td>
        Example Text 2
      </td>
      <td>
        Example Text 3
      </td>
      <td>
        Example Text 4
      </td>
      <td>
        Example Text 5
      </td>
      <td>
        Example Text 6
      </td>
      <td>
        Example Text 7
      </td>
      <td>
        Example Text 8
      </td>
      <td>
        Example Text 9
      </td>
      <td>
        Example Text 10
      </td>
      <td>
        Example Text 11
      </td>
      <td>
        Example Text 12
      </td>
      <td>
        Example Text 13
      </td>
      <td>
        Example Text 14
      </td>
      <td>
        Example Text 15
      </td>
      <td>
        Example Text 16
      </td>
      <td>
        Example Text 17
      </td>
      <td>
        Example Text 18
      </td>
      <td>
        Example Text 19
      </td>
      <td>
        Example Text 20
      </td>
      <td>
        Example Text 21
      </td>
      <td>
        Example Text 22
      </td>
      <td>
        Example Text 23
      </td>
      <td>
        Example Text 24
      </td>
      <td>
        Example Text 25
      </td>
      <td>
        Example Text 26
      </td>
      <td>
        Example Text 27
      </td>
      <td>
        Example Text 28
      </td>
    </tr>
  </table>
</div>