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

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

html css

Html 让两个元素并排垂直填充所有空间,html,css,flexbox,Html,Css,Flexbox,我的页面主体中有两个元素，我希望它们并排存在，并填充所有垂直空间我的代码非常简单：   <body> <textarea id="text-field"> <iframe id="r

我的页面主体中有两个元素，我希望它们并排存在，并填充所有垂直空间

我的代码非常简单：

<!-- 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>

无论我尝试什么，这两种元素都不会填满身体中所有可用的sapce

有什么帮助吗？

下面是一个使用

vh

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

首先，使用结束标记

第二，身高：100%；您还需要将其应用于

html

标记，以便为

body

元素提供高度参考。并将

margin:0

应用于

html

和

body

以将默认边距重置为零：

*{
框大小：边框框；
}
html{
身高：100%；
保证金：0；
}
身体{
字体：标题；
显示器：flex；
身高：100%；
保证金：0；
}
#文本字段{
字体系列：信使；
宽度：50%；
弹性：10自动；
}
#渲染场{
宽度：50%；
弹性：10自动；
}

你必须给它一个设定的高度，比如100px。浏览器窗口没有高度，它们只是滚动。或者尝试vh和vw给出

高度：100%

到

html

@Alex，这很有效，谢谢。但是如果不使用结束标记（见下面的答案），单靠这一点并不能在所有浏览器上都有效。为什么需要重置默认边距？正如我所写的：因为所有（或至少几乎所有）浏览器的body元素都有默认边距（几像素），只有这样你才能摆脱它。要查看默认边距，只需在空白页中放置一个100%宽的带背景色的DIV：由于该边距，您将在DIV的所有边上看到一些空间。

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