如果 css 中有左边距，我如何使 div 的宽度直到页面的右端

Question

我正在制作一个包含两个主要div的页面。其中一个显示页面的内容，另一个是选项菜单。
选项菜单是页面左侧的固定div。它的固定宽度为 180px。内容div 有一个左边距，为 200px(因为选项div 的填充为 10px)。在内容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>

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>

Answer 2

我已经在内容部分添加了width clac。

.options{
padding: 10px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 180px;
background-color: yellow;
}
.content{
width: calc(100% - 200px);
float: right;
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>