这就是我需要的，左侧菜单是240px宽，剩余宽度必须用第二个div填充，整个身体应该可以滚动，请帮忙吗？
+------------+-------------------------------------+
| | |
| | |
| 240px | remaining width |
| | |
| | |
+------------+-------------------------------------+
<body>
<div id="left"></div>
<div id="right"></div>
</body>
选项 1
- 使用
flexbox
section {
display: flex;
}
section div {
border: 1px solid red
}
section div:first-of-type {
flex: 0 240px;
}
section div:last-of-type {
flex: 1
}<section>
<div>1</div>
<div>2</div>
</section>选项 2
- 使用
calc()
section {
font-size: 0
}
section div {
border: 1px solid red;
display: inline-flex;
box-sizing:border-box;
font-size: 16px;
}
section div:first-of-type {
width: 240px
}
section div:last-of-type {
width: calc(100% - 240px)
}<section>
<div>1</div>
<div>2</div>
</section>选项 3
- 使用
display:table
section {
display: table;
table-layout: fixed;
width:100%
}
section div {
display: table-cell;
border: 1px solid red
}
section div:first-of-type {
width: 240px;
}
section div:last-of-type {
width: 100%;
}<section>
<div>1</div>
<div>2</div>
</section>