css容器撑满页面 |css 去除高度

/* 方式一：使用绝对定位 */
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 方式二：使用flex布局 */
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
/* 方式三：使用vh单位 */
.container {
height: 100vh;
}

以上三种实现方式都可以将容器撑满整个页面。使用绝对定位的方式需要给父元素设置相对定位，并且设置top、left、right、bottom为0；使用flex布局需要给html和body元素设置高度为100%并取消margin，并在body上设置display为flex，且给容器设置flex:1；而使用vh单位则可以直接给容器设置height为100vh即可。

需要注意的是，在使用以上方法时，如果页面中存在头部和底部导航栏等元素，需要将容器的高度减去这些元素的高度，否则容器会超出页面。