html - 阻止 Bootstrap 4 页脚上升
问题描述
我的 bootstrap 4 页脚在正文内容较少的页面上上升。
下面是问题的图像。
footer {
background-color: white;
color: #d5d5d5;
padding-top: 1rem;
}
footer a {
color: #d5d5d5;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
color: black;
}
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-6">
<p class="marker">blah blah blah.
<a class="btn btn-social-icon btn-instagram">
<span class="fa fa-instagram"></span>
</a>
</div>
<div class="col-md-6">
<p class="marker">more blah blah.
<a class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook"></span>
</a>
</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© app.com</h5>
</div>
</div>
</div>
如果还有什么我忘记附上的,请告诉我,我会编辑帖子。
我玩过,footer: sticky; / fixed;
但这并不能解决问题。
页脚也太高了,但是每当我添加一个height
CSS 变量时,高度都会降低,但文本会保持在原位。
非常感谢您的帮助。
解决方案
解决此问题的正确方法是将页面布局如下:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
使用以下 CSS:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
这适用于或不使用 Bootstrap,但如果您不使用 Bootstrap,您可能还想要
* { box-sizing: border-box; }
(已包含在 Bootstrap 中)。
这是一个使用 Bootstrap v4 的示例:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
background-color: #eee;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Elementum eu facilisis sed odio morbi quis commodo odio. Tempus egestas sed sed risus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Eu ultrices vitae auctor eu augue ut. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. In pellentesque massa placerat duis. Bibendum enim facilisis gravida neque convallis.
<p>Nisi vitae suscipit tellus mauris a. Non blandit massa enim nec dui nunc. Hac habitasse platea dictumst vestibulum rhoncus. Vitae congue mauris rhoncus aenean vel. In fermentum et sollicitudin ac orci phasellus egestas. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc mattis enim ut tellus. Ultrices dui sapien eget mi proin sed libero. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Sodales ut eu sem integer vitae justo eget magna. Pellentesque id nibh tortor id aliquet. Sed pulvinar proin gravida hendrerit lectus a.
<p>Sed velit dignissim sodales ut eu sem integer. Senectus et netus et malesuada fames ac. Arcu non sodales neque sodales ut etiam sit amet nisl. Velit scelerisque in dictum non. Integer eget aliquet nibh praesent tristique. Dictumst quisque sagittis purus sit. Quam elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur adipiscing elit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit egestas dui id ornare arcu odio ut sem. Nec dui nunc mattis enim ut tellus elementum sagittis. Nulla facilisi cras fermentum odio. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Magna eget est lorem ipsum. Vitae tortor condimentum lacinia quis vel eros donec ac. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Mollis nunc sed id semper risus in. Id nibh tortor id aliquet lectus proin. Netus et malesuada fames ac.
</div>
<div class="col">
<p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus egestas. Leo integer malesuada nunc vel risus commodo viverra maecenas. Amet cursus sit amet dictum sit amet. In hac habitasse platea dictumst quisque sagittis purus sit amet. Congue mauris rhoncus aenean vel. Imperdiet proin fermentum leo vel orci porta non. Velit dignissim sodales ut eu. Mauris a diam maecenas sed enim ut sem viverra aliquet. Morbi non arcu risus quis varius quam quisque. Blandit aliquam etiam erat velit scelerisque in. Convallis aenean et tortor at risus viverra adipiscing at in. In hac habitasse platea dictumst vestibulum. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
<p>Non sodales neque sodales ut etiam sit amet. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Lectus proin nibh nisl condimentum id venenatis a. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Libero id faucibus nisl tincidunt. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Maecenas accumsan lacus vel facilisis volutpat. Bibendum arcu vitae elementum curabitur vitae. Id porta nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel. Purus in mollis nunc sed id semper risus in hendrerit. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Eget nunc lobortis mattis aliquam. Suspendisse in est ante in nibh mauris cursus mattis. Nibh mauris cursus mattis molestie a iaculis. Eget dolor morbi non arcu risus quis varius quam quisque. Volutpat maecenas volutpat blandit aliquam etiam erat velit.
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
推荐阅读
- python - vscode中的python - 无法让多处理工作
- azure-devops - Azure Devps:如何为管道和链接服务指定数据工厂参数
- php - WordPress 网格 PHP
- python - OSError: [WinError 10038] 尝试对套接字以外的项目进行操作
- r - 如何用平均值替换异常值
- vue.js - Vuetify 数据表禁止单击单元格中的行
- sql - Presto SQL 映射到列
- python - 用户可以从 URL 手动编辑另一个用户视图
- algorithm - 给定一个数字,找到具有唯一数字但 0 和 2 的下一个更大的数字
- localhost - 如何解决“safari 无法与服务器 localhost 建立安全连接”