Question

我正在开发一个Web应用程序，我正试图在页面的最底部保留我的页脚文本。

我不想让它完全移动，只是始终位于页面的底部，无论页面大小如何。截至目前，它适用于大多数浏览器，但是一旦我切换到移动设备，它就会移动到页面侧面。

我如何将它保持在移动底部？

谢谢！

<html>
<body>
    <footer>
       <div class="container" style="position:absolute; bottom:0px; left:520px;">
        <p>Thank you and Goodbye</p>
      </div>
    </footer>
</body> 
</html>

Answer 1

您可以使用位于https://getbootstrap.com/examples/sticky-footer/或https://codepen.io/elmahdim/pen/Djlax的粘性页脚。此外，您还可以使用navbar-fixed-bottom

使用STICKY FOOTER来这里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>

Answer 2

将此内容包含在您的页脚中：

position:fixed;

Answer 3

.container
{
 bottom: 0px;
 position: fixed;
}

Answer 4

在响应式设计中，您不必为放置元素设置精确像素。在移动屏幕中，宽度要小得多，这可能是页脚向侧面移动的原因。相反，根据您的用例，这样的事情应该更合适：

<div class="container" style="position:absolute; bottom:0px; text-align:center;">
    <p>Thank you and Goodbye</p>
</div>

如果内容可以是此处文本以外的内容，则自动边距margin: auto;可能很有用。

Answer 5

HTML PART：

<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;
}

Answer 6

＆＃13;

footer{position:absolute;bottom:0px;}

＆＃13;

<html>
<body>
    <footer>
       <div  class="container">
        <p>Thank you and Goodbye</p>
      </div>
    </footer>
</body> 
</html>

＆＃13;

Answer 7

猜猜问题是将页脚固定在底部。内容大小可能会有所不同，但页脚必须始终可见，并且应该是固定的。这是代码。希望它会有用。给出背景颜色以区分部分。

 <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>

如何使页脚停留在网页的底部

7 个答案: