Bootstrap 4是一个流行的前端开发框架,它提供了丰富的CSS和JavaScript组件,可以帮助开发人员快速构建响应式网页。
要将页脚推到页面底部,并用主要内容填充高度,可以使用以下步骤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/css/bootstrap.min.css">
<title>Bootstrap 4 Footer</title>
<style>
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 与页脚高度相同 */
}
.footer {
height: 50px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Main Content</h1>
<!-- 主要内容 -->
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Footer content here</span>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
.wrapper
的min-height
为100%,并将.footer
的高度设置为固定值,我们可以确保页脚始终位于页面底部。.container
来包裹主要内容,并在页脚中添加了一个容器来放置页脚内容。这样,当页面内容不足以填充整个屏幕时,页脚将始终位于页面底部。如果页面内容超过屏幕高度,页脚将被推到页面的最后。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云