[分享]css全屏高度减去固定高度

CSS是一种用来定义网页布局和样式的语言。 在创建网页时，经常会遇到需要在全屏高度中减去一个固定高度的情况。这可以通过以下CSS代码来实现：body { height: 100vh; /将body高度...

CSS是一种用来定义网页布局和样式的语言。 在创建网页时，经常会遇到需要在全屏高度中减去一个固定高度的情况。这可以通过以下CSS代码来实现：

body {
   height: 100vh; /*将body高度设置为视口高度*/
   margin: 0; /*去除body的margin*/
}

.header {
   height: 50px; /*header高度*/
   background-color: #ccc; /*设置header背景色*/
}

.main {
   height: calc(100vh - 50px); /*将main高度设置为body高度减去header高度*/
   background-color: #fff; /*设置main背景色*/
} 

在上述代码中，我们首先将body的高度设置为视口高度，然后使用calc()函数将main的高度设置为body高度减去header的高度。这样，main的高度将始终与视口高度相同，并减去header的高度，以满足全屏的要求。

需要注意的是，在使用calc()函数时，需要将减号前后的值用空格隔开，否则代码将无法正常运行。