Question

这就是我需要的，左侧菜单是240px宽，剩余宽度必须用第二个div填充，整个身体应该可以滚动，请帮忙吗？

+------------+-------------------------------------+
|            |                                     |
|            |                                     |
|  240px     |          remaining width            |
|            |                                     |
|            |                                     |
+------------+-------------------------------------+



<body>
<div id="left"></div>
<div id="right"></div>
</body>

Answer 1

选项1

使用flexbox

＆＃13;

section {
  display: flex;
}

section div {
  border: 1px solid red
}

section div:first-of-type {
  flex: 0 240px;
}

section div:last-of-type {
  flex: 1
}

＆＃13;

<section>
  <div>1</div>
  <div>2</div>
</section>

＆＃13;

选项2

使用calc()

＆＃13;

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)
}

＆＃13;

<section>
  <div>1</div>
  <div>2</div>
</section>

＆＃13;

选项3

使用display:table

＆＃13;

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%;
}

＆＃13;

<section>
  <div>1</div>
  <div>2</div>
</section>

＆＃13;

css - 两个divs相同的行 - 滚动体

1 个答案:

选项1

选项2

选项3