css让foot标签始终固定在底部当页面内容全部占满时显示footer在底部；当页面内容不满时footer也是在最底部显示。
可以使用CSS的flexbox布局来实现让footer标签始终固定在底部。
HTML结构：
<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>
CSS样式：
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
flex-shrink: 0;
}
解释：
- 设置html和body的高度为100%确保body占满整个屏幕。
- 将body的display属性设置为flex，使其成为一个flex容器。
- 将body的flex-direction属性设置为column，让子元素垂直排列。
- main元素使用flex: 1，将其放置在flex容器的中间，并且会自动占满剩余的空间。
- footer元素使用flex-shrink: 0，确保当页面内容不满时，footer也会始终在底部显示。
这样，无论页面内容是否占满屏幕，footer都会始终固定在底部
原文地址: https://www.cveoy.top/t/topic/ijev 著作权归作者所有。请勿转载和采集!