要将页脚固定在网页底部,可以使用CSS的Flexbox或Grid布局方法。以下是一个简单的示例,使用Flexbox布局将页脚固定在网页底部:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<!-- 页头内容 -->
</header>
<main>
<!-- 主要内容 -->
</main>
<footer>
<!-- 页脚内容 -->
</footer>
</div>
</body>
</html>
/* styles.css */
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
}
header,
main,
footer {
padding: 20px;
}
footer {
margin-top: auto;
}
这里的关键是将body的display属性设置为flex,并将flexDirection设置为column。然后,将.container的display属性设置为flex,并将flexDirection设置为column。最后,将footer的margin-top属性设置为auto,这将使页脚自动固定在网页底部,即使主要内容不足以填充整个屏幕,页脚也会始终保持在底部。
这种方法简单易用,不需要使用JavaScript,并且在各种设备和屏幕尺寸上都能正常工作。
领取专属 10元无门槛券
手把手带您无忧上云