在 HTML 中,可以使用 CSS 的 display: flex
和 flex-grow
属性来设置各分屏大小始终填满屏幕。
首先,将父元素的 display
设为 flex
,这样它的所有子元素就会变成弹性布局(flex layout)。然后,为每个分屏元素设置 flex-grow
属性为 1。这样,当父元素的大小变化时,每个分屏元素都会按比例增长,从而使它们始终填满屏幕。
例如,如果你有三个分屏元素,你可以在 CSS 中这样设置:
.screen {
flex-grow: 1;
}
.container {
display: flex;
}