我正在研究一個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