css 撑到页面高度 |css3显示下划线

为了解决这些问题，CSS提供了几种方式来让元素撑满页面高度。

/* 方法一：定位 */
.element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* 方法二：flex布局 */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
/* 方法三：grid布局 */
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.content {
grid-row: 1 / span 1;
}

使用这些方法，大家可以轻松地让元素撑满页面高度，并创建出更为美观和完整的页面布局。