我想制作一个粘性页脚，但mt auto根本不起作用。我试了很多办法来解决它，但都无济于事。其他边距填充码，如mt-1mb-2不工作太。。。
HTML:https://pastecode.io/s/kdS4RzFTTJCSS：https://pastecode.io/s/5N80x5h1YE
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body {
padding-bottom: 20px;
background-color: #24252A;
font-family: 'Work Sans', sans-serif;
color:#f7f7f7;
}
.navbar {
transition: all .5s ease;
}
.navbar-collapse{
transition: all .5s ease;
}
/* options section */
.options{
margin-top:10rem;
margin-bottom:2rem;
color:#f7f7f7;
display:flex;
justify-content: space-between;
}
.circles-wrap{
display:flex;
flex-direction: column;
align-items: center;
}
.circle{
width:250px;
height:250px;
background-color: #f7f7f7;
border-radius: 50%;
display:flex;
align-items: center;
justify-content: center;
}
.circle-text{
margin-top:1rem;
font-size:1.5rem;
letter-spacing: 2px;
}
.ss{
margin-top:auto;
}
.circle img{
width:150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emir</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Local CSS -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#">Emirhan Sirkeci</a>
<button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarsExample04">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="container options">
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">Songs</label>
</div>
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">Movies</label>
</div>
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">My Posts</label>
</div>
</section>
<footer class="container mt-2">
<div>content</div>
<div>content</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="frontend.js"></script>
</body>
</html>在主体d-flex flex-row上添加此类
<footer class="container mt-auto">
<div>content</div>
<div>content</div>
</footer>
试试这个
这里是粘性页脚：
/* ADDED */
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
body > section.container {
flex: 1 0 auto;
}
body > footer{
flex-shrink:0;
}
获取更多信息
演示-1
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body {
padding-bottom: 20px;
background-color: #24252A;
font-family: 'Work Sans', sans-serif;
color:#f7f7f7;
}
.navbar {
transition: all .5s ease;
}
.navbar-collapse{
transition: all .5s ease;
}
/* options section */
.options{
margin-top:10rem;
margin-bottom:2rem;
color:#f7f7f7;
display:flex;
justify-content: space-between;
}
.circles-wrap{
display:flex;
flex-direction: column;
align-items: center;
}
.circle{
width:250px;
height:250px;
background-color: #f7f7f7;
border-radius: 50%;
display:flex;
align-items: center;
justify-content: center;
}
.circle-text{
margin-top:1rem;
font-size:1.5rem;
letter-spacing: 2px;
}
.ss{
margin-top:auto;
}
.circle img{
width:150px;
}
/* ADDED */
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
body > section.container {
flex: 1 0 auto;
}
body > footer{
flex-shrink:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emir</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Local CSS -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#">Emirhan Sirkeci</a>
<button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarsExample04">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="container options">
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">Songs</label>
</div>
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">Movies</label>
</div>
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">My Posts</label>
</div>
</section>
<footer class="container mt-2">
<div>content</div>
<div>content</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="frontend.js"></script>
</body>
</html>演示-2
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body {
padding-bottom: 20px;
background-color: #24252A;
font-family: 'Work Sans', sans-serif;
color:#f7f7f7;
}
.navbar {
transition: all .5s ease;
}
.navbar-collapse{
transition: all .5s ease;
}
/* options section */
.options{
/*margin-top:10rem;*/
margin-bottom:2rem;
color:#f7f7f7;
display:flex;
justify-content: space-between;
}
.circles-wrap{
display:flex;
flex-direction: column;
align-items: center;
}
.circle{
width:250px;
height:250px;
background-color: #f7f7f7;
border-radius: 50%;
display:flex;
align-items: center;
justify-content: center;
}
.circle-text{
margin-top:1rem;
font-size:1.5rem;
letter-spacing: 2px;
}
.ss{
margin-top:auto;
}
.circle img{
width:150px;
}
/* ADDED */
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
body > section.container {
flex: 1 0 auto;
}
body > footer{
flex-shrink:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emir</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Local CSS -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#">Emirhan Sirkeci</a>
<button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarsExample04">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="container options">
<!--<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">Songs</label>
</div>
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">Movies</label>
</div>
<div class="circles-wrap">
<a href="#">
<div class="circle">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</a>
<label class="circle-text">My Posts</label>
</div>-->
</section>
<footer class="container mt-2">
<div>content</div>
<div>content</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="frontend.js"></script>
</body>
</html>在css和HTML 中添加以下类
<footer class="container mt-2 sticky-footer">
.sticky-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}