css 上下固定 |css 漂亮渐变

/* 方法一：使用定位 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
/* 方法二：使用 flexbox */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
/* 方法三：使用 grid */
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
.header {
grid-row: 1;
}
.footer {
grid-row: 3;
}

以上三种方法均可实现上下固定布局，具体使用哪一种方法，可以根据具体情况和个人喜好选择。需要注意的是，在使用定位（方法一）时，需要设置定位元素的宽度和高度；在使用 flexbox（方法二）和 grid（方法三）时，需要设置一个容器元素，并将其高度设置为视口高度，或使用 min-height: 100vh 来保证固定布局生效。

总的来说，上下固定布局在实际开发中具有广泛的应用场景，在实现网站布局时可以考虑使用。