html – 如何在部分填充时强制身体为屏幕大小？

概述我想建立一个网站,其中有一个固定的标题,一个可变的内容和一个在页面未完全填充时位于底部的页脚.我将使用 CSS Grid Layout. 知道高度时扩展内容元素很容易： div { border-width: 1px; border-style: solid;}#container { width: 200px; height: 200px; display: grid; 我想建立一个网站,其中有一个固定的标题,一个可变的内容和一个在页面未完全填充时位于底部的页脚.我将使用 CSS Grid Layout.

知道高度时扩展内容元素很容易：

div {  border-wIDth: 1px;  border-style: solID;}#container {  wIDth: 200px;  height: 200px;  display: grID;  grID-template-rows: auto 1fr auto;}

<div ID="container">  <div>hello </div>  <div>world</div>  <div>three</div></div>

然后我试图在一个完整的窗口浏览器上重现这个,我不知道如何告诉应用程序“如果没有足够的内容,高度就是浏览器的大小,否则这就是内容”.我认为最小高度：100％;适用于身体会很好 – 但它不是：

body {    display: grID;    grID-template-rows: auto 1fr auto;    grID-template-columns: 1fr auto;    min-height: 100%;}.navbar {    grID-row-start: 1;    grID-row-end: 2;    grID-column-start: 1;    grID-column-end: 3;}.main {    grID-row-start: 2;    grID-row-end: 3;    grID-column-start: 1;    grID-column-end: 2;}.toc {    grID-row-start: 2;    grID-row-end: 3;    grID-column-start: 2;    grID-column-end: 3;}.footer {    grID-row-start: 3;    grID-row-end: 4;    grID-column-start: 1;    grID-column-end: 3;}

此代码创建正确的网格,但正文的大小不是浏览器的整个高度：

解决方法 而不是最小高度：100％,使用最小高度：100vh.

百分比高度很棘手,因为它们通常需要在父元素上定义高度(full explanation).

从规格：

07001

The vIEwport-percentage lengths are relative to the size of the
initial containing block. When the height or wIDth of the initial
containing block is changed,they are scaled accordingly.

vw unit – Equal to 1% of the wIDth of the initial containing block. vh unit – Equal to 1% of the height of the initial containing
block. vmin unit – Equal to the smaller of vw or vh. vmax unit – Equal to the larger of vw or vh.

总结

以上是内存溢出为你收集整理的html – 如何在部分填充时强制身体为屏幕大小？全部内容，希望文章能够帮你解决html – 如何在部分填充时强制身体为屏幕大小？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。