html - 页脚底部内容不会粘在底部
问题描述
我是新手，一直在尝试学习本教程：https ://www.youtube.com/watch?v=o-cKmAeNJiA&t=315s 。出于某种原因，我的页脚底部内容浮动在中间，实际上不会粘在页面底部。它也不会居中，这很令人困惑。背景是透明的，这是我想要的。帮助？
<!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 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Quarantine Blog</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Quarantine Pal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Our Mission</a>
<a class="dropdown-item" href="#">Our Team</a>
<a class="dropdown-item" href="#">FAQ</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Founder</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Press</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up <i class="fa fa-user-plus"></i></a></li>
<li><a href="#">Login <i class="fa fa-user"></i></a></li>
</ul>
</div>
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Quarantine Blog</h1>
<p class="lead">Exploring the 'New Normal'</p>
<hr>
<a href="" class="btn btn-primary">Sign Up</a>
<a href="" class="btn btn-success">Login</a>
</section>
<div class="container">
<div class="card-deck">
<div class="card">
<img src="https://images.unsplash.com/photo-1588776409240-05d32e7614f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Sailor Moon">
<div class="card-body">
<h5 class="card-title text-center">Self-Care and Burn Out</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1588779851655-558c2897779d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Inuyasha">
<div class="card-body">
<h5 class="card-title text-center">Help Fight Coronavirus</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1588777308282-b3dd5ce9fb67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Dragon Ball Z">
<div class="card-body">
<h5 class="card-title text-center">Pandemic Socializing</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
</div>
</div>
<footer>
<div class="footer">
<div class="footer-content">
<div class="footer-section about"></div>
<div class="footer-section links"></div>
<div class="footer-section contact us"></div>
</div>
<div class="footer-bottom">
© quarantinepal.com | Designed by Jamie Tyson
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
CSS
#header {
background-color: transparent;
background-position: center bottom;
}
h1 {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-brand {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar.bg-dark.navbar-dark {
background-color: transparent !important;
}
body {
height: 100%;
}
body {
background-image: url('https://images.unsplash.com/photo-1588774210246-a1dc467758df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80')
}
.card-deck {
padding-bottom: 100px;
}
.card-body {
background-color: transparent;
opacity: 80%;
font-family: 'Source Sans Pro',
}
.card {
background-color: transparent !important;
border-color: white !important;
}
.card-footer {
background-color: transparent;
opacity: 80%;
border-top: white;
}
.lead {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.card-title {
color: white !important;
opacity: 100% !important;
font-family: 'Source Sans Pro', sans-serif;
}
.card-text {
color: white !important;
opacity: 100% !important;
font-family: 'Source Sans Pro', sans-serif;
}
.nav-link {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
background-color: transparent !important;
border: transparent !important;
}
.dropdown-item {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-nav.mr-auto a:hover {
color: magenta !important;
text-decoration: none ;
}
.nav.navbar-nav.navbar-right li a {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
padding-left: 10px;
}
.nav.navbar-nav.navbar-right a:hover {
color: magenta !important;
text-decoration: none ;
}
hr {
width: 400px !important;
border-top: 1px solid #f8f8f8 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.dropdown-item {
background-color: transparent !important;
}
.footer {
background: transparent;
color: white;
height: 200px;
position: relative;
}
.footer.footer-bottom {
background: transparent;
color: white;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px !important;
left: 0px;
padding-top: 20px;
}
.footer.footer-content {
border: 1px solid red;
height: 350px;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
解决方案
嗨，杰米，
请尝试我整理的此代码，以帮助您处理您的请求。bootstrap 中有一个名为“fixed-bottom”的类，它允许我们实现您想要做的事情。我还在你的 CSS 类中为页脚删除了几个额外的属性，以便在现有的引导类上进行这项工作。
我还使用 bootstrap 中的 ml-3 和 mb-1 类为页脚文本添加了一些左边距，这样文本就不会触及屏幕的左侧和底部边缘。
我当然希望这会有所帮助，杰米。快乐编码！
注意：我正在添加一个屏幕截图，说明这些更改后的外观。
html,
body {
margin: 0;
height: 100%;
}
#header {
background-color: transparent;
background-position: center bottom;
}
h1 {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-brand {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar.bg-dark.navbar-dark {
background-color: transparent !important;
}
body {
height: 100%;
}
body {
background-image: url('https://images.unsplash.com/photo-1588774210246-a1dc467758df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80')
}
.card-deck {
padding-bottom: 100px;
}
.card-body {
background-color: transparent;
opacity: 80%;
font-family: 'Source Sans Pro',
}
.card {
background-color: transparent !important;
border-color: white !important;
}
.card-footer {
background-color: transparent;
opacity: 80%;
border-top: white;
}
.lead {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.card-title {
color: white !important;
opacity: 100% !important;
font-family: 'Source Sans Pro', sans-serif;
}
.card-text {
color: white !important;
opacity: 100% !important;
font-family: 'Source Sans Pro', sans-serif;
}
.nav-link {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
background-color: transparent !important;
border: transparent !important;
}
.dropdown-item {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-nav.mr-auto a:hover {
color: magenta !important;
text-decoration: none ;
}
.nav.navbar-nav.navbar-right li a {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
padding-left: 10px;
}
.nav.navbar-nav.navbar-right a:hover {
color: magenta !important;
text-decoration: none ;
}
hr {
width: 400px !important;
border-top: 1px solid #f8f8f8 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.dropdown-item {
background-color: transparent !important;
}
.footer {
background: transparent;
color: white;
}
.footer.footer-bottom {
background: transparent;
color: white;
height: 50px;
width: auto;
text-align: center;
position: absolute;
bottom: 0px !important;
left: 0px;
padding-top: 20px;
}
.footer.footer-content {
border: 1px solid red;
height: 350px;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}<!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 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Quarantine Blog</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Quarantine Pal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Our Mission</a>
<a class="dropdown-item" href="#">Our Team</a>
<a class="dropdown-item" href="#">FAQ</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Founder</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Press</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up <i class="fa fa-user-plus"></i></a></li>
<li><a href="#">Login <i class="fa fa-user"></i></a></li>
</ul>
</div>
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Quarantine Blog</h1>
<p class="lead">Exploring the 'New Normal'</p>
<hr>
<a href="" class="btn btn-primary">Sign Up</a>
<a href="" class="btn btn-success">Login</a>
</section>
<div class="container">
<div class="card-deck">
<div class="card">
<img src="https://images.unsplash.com/photo-1588776409240-05d32e7614f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Sailor Moon">
<div class="card-body">
<h5 class="card-title text-center">Self-Care and Burn Out</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1588779851655-558c2897779d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Inuyasha">
<div class="card-body">
<h5 class="card-title text-center">Help Fight Coronavirus</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1588777308282-b3dd5ce9fb67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Dragon Ball Z">
<div class="card-body">
<h5 class="card-title text-center">Pandemic Socializing</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom ml-3 mb-1">
<div class="footer">
<div class="footer-content">
<div class="footer-section about"></div>
<div class="footer-section links"></div>
<div class="footer-section contact us"></div>
</div>
<div class="footer-bottom">
© quarantinepal.com | Designed by Jamie Tyson
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>