Question

在下面的代码中，Foo是固定高度。横条应垂直占据其余空间。但是该栏溢出了，垂直占据了其余部分，并且始终有滚动条。

body {
  display: flex;
  flex-direction: column;
}

.foo {
  width: 100%;
  height: 30px;
  border: 1px solid red;
}

.bar {
  width: 100%;
  flex: 1;
  border: 1px solid blue;
}

iframe {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

<div class="foo">
  This is Foo.
</div>
<div class="bar">
  <iframe id="simple" src="simple.html"></iframe>
</div>

Answer 1

HTML元素默认为height: auto。如果这是您要使用的空间，则需要定义全高。（more details）

然后，您需要从body元素中删除默认边距。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;           /* NEW */
  margin: 0;               /* NEW */
}

.foo {
  flex: 0 0 30px;
  border: 1px solid red;
}

.bar {
  flex: 1;
  display: flex;
  border: 1px solid blue;
}

iframe {
  flex: 1;
}

<div class="foo">This is Foo.</div>
<div class="bar"><iframe id="simple" src="simple.html"></iframe></div>

弹性物品溢出容器

1 个答案: