要让 footer 始终位于页面的最底部不随滚动而滚动，我们可以采用以下两种方法：
方法一：使用 flex 布局
HTML：
<body>
<div class="container">
<main>这里是主内容区域</main>
<footer>这里是底部区域</footer>
</div>
</body>
CSS：
html,
body {
height: 100%;
}
.container {
display: flex;
min-height: 100%;
flex-direction: column;
}
main {
flex: 1;
}
footer {
flex-shrink: 0;
}
代码说明：
- 首先将
html和body的高度设置为100%，以保证父元素（即.container）的高度为整个浏览器的高度。 - 同时，使用
display: flex将.container设置为 flex 布局，并设置flex-direction: column，使得.container内部的子元素按照从上到下的方向排列。 - 将
main的flex属性设置为1，表示在.container中占据剩余的全部空间； - 将
footer的flex-shrink属性设置为0，表示在内容撑满父元素时，不会被缩小。
方法二：使用 position 和 margin
HTML：
<body>
<div id="wrapper">
<main>这里是主内容区域</main>
</div>
<footer>这里是底部区域</footer>
</body>
CSS：
html,
body {
height: 100%;
}
#wrapper {
min-height: 100%;
margin-bottom: -60px; /* footer height */
padding-bottom: 60px; /* footer height */
}
main {
padding: 20px;
}
footer {
height: 60px;
line-height: 60px;
text-align: center;
background-color: #ccc;
position: relative;
margin-top: -60px; /* footer height */
clear: both;
}
代码说明：
- 首先将
html和body的高度设置为100%，以保证#wrapper的高度为整个浏览器的高度。 - 在
#wrapper上设置min-height为100%，并设置margin-bottom和padding-bottom的值都为 footer 的高度，以使 footer 不会挤压#wrapper的内容。 - 在
main中设置一些内边距，以让内容与边界产生一定距离，使其看起来更美观。 - 在
footer中设置高度、行高、文本对齐、背景颜色和位置。使用position: relative让 footer 悬浮在 wrapper 的末尾，再使用margin-top为 footer 预留空间。 - 最后使用
clear: both清除浮动。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：让footer始终位于页面的最底部不随滚动而滚动 - Python技术站
微信扫一扫 
支付宝扫一扫 