如果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>