Question

我的页面主体中有两个元素，我希望并排生活并填充所有垂直空间。

我的代码非常简单：

<!-- index.html minus all the usual junk-->
<!-- also ignore the lack of a url-tag and the like, it's intentionally left out -->
<body>
  <textarea id="text-field">
  <iframe id="render-field">
</body>

和

// index.css
body {
  font: caption;
  display: flex;
  height: 100%;
}

#text-field {
  font-family: Courier;
  width: 50%;
  flex: 1 0 auto;
}

#render-field {
  width: 50%;
  flex: 1 0 auto;
}

我尝试的并不重要，这两个元素不会填充身体中所有可用的物质。

任何帮助？

Answer 1

以下是使用vh

的插图示例

vh相对于视口*高度的1％

Plunker example

Reference

Answer 2

首先，使用结束标记。

第二，身高：100％;您还需要将其应用于html标记，以获得body元素的高度参考。并将margin: 0应用于html和body以将默认边距重置为零：

* {
box-sizing: border-box;
}
html {
  height: 100%;
  margin: 0;
}

body {
  font: caption;
  display: flex;
  height: 100%;
  margin: 0;
}

#text-field {
  font-family: Courier;
  width: 50%;
  flex: 1 0 auto;
}

#render-field {
  width: 50%;
  flex: 1 0 auto;
}

<body>
  <textarea id="text-field"></textarea>
  <iframe id="render-field"><iframe>
</body>

有两个元素并排垂直填充所有空间

2 个答案: