我正在研究一个Web应用程序，并且我正在尝试在页面的最底部保留页脚文本。如何使页脚停留在网页底部
我不希望它完全移动，只是始终在页面的底部，而不管页面的大小。就目前而言，它对大多数浏览器都有很好的效果，但是一旦我切换到移动设备，它就会移动到页面的一侧。
我该如何保持它在底部的移动以及？
谢谢！
<html>
<body>
<footer>
<div class="container" style="position:absolute; bottom:0px; left:520px;">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>您可以使用设在这里https://getbootstrap.com/examples/sticky-footer/或https://codepen.io/elmahdim/pen/Djlax粘页脚。此外，您还可以使用navbar-fixed-bottom
使用STICKY页脚GET HERE https://jsfiddle.net/aice09/zy1x2svg/1/
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Sticky Footer</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer.css" rel="stylesheet">
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Use the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
粘footer.css
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
使用NAVBAR_FIXED_BOTTOM
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
.container
{
bottom: 0px;
position: fixed;
}
请编辑你的答案，包括一些解释。仅有代码的答案对未来SO读者的教育很少。您的回答是在低质量的审核队列中。 – mickmackusa
在响应式设计，你不应该设置精确的像素用于放置元素。在移动屏幕上，宽度要小得多，这可能是页脚移动到一边的原因。相反，这样的事情应该根据您的使用情况更合适：
<div class="container" style="position:absolute; bottom:0px; text-align:center;">
<p>Thank you and Goodbye</p>
</div>
如果内容可以比这里的文字以外的内容，自动保证金，margin: auto;，可能是有用的。
HTML部分：
<html>
<body>
<div id="content">
<div id="main"></div>
</div>
<div id="bottom"></div>
</body>
</html>
的CSS：
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
#bottom {
position: relative;
margin-top: -180px;
height: 180px;
clear: both;
}
footer{position:absolute;bottom:0px;}<html>
<body>
<footer>
<div class="container">
<p>Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>猜猜问题是将页脚固定在底部。内容大小可能会有所不同，但页脚必须始终可见，并且应该固定。这是代码。希望它是有用的。背景颜色仅用于区分各个部分。
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-12" style="background-color:grey;height:1000px;">Content Here</div>
</div>
<footer>
<div class="col-md-12 container" style="position:fixed; BOTTOM:0px;background-color:red;">
<p class="pull-right">Thank you and Goodbye</p>
</div>
</footer>
</body>
</html>
当我确定位置时，文字会滚动并始终保持在我的视野中。我不希望这种情况发生。我希望文本始终静态保留在页面的底部，而不是我的视图。 – Carbon
https://getbootstrap.com/examples/sticky-footer/ – hydrococcus