Question

自从我试图使页脚停留在网页内容的底部以来已经有3天了。我知道有很多类似的问题，但是我找不到任何解决方案。这是我的代码：

.container{position:relative;}
 footer{position:absolute;bottom:0;}

 <div class="container">
        <div class="row h-100">
            <div class="col">
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
            </div>
        </div>
        <footer>
          <h1>contact us</h1>
        </footer>
    </div>

Answer 1

如果希望它位于页面底部而不是视口，则必须设置内容的高度，以使absolute页脚位于底部。

否则，请更改其相对的parent类。在这里，我将body设置为footer

的父对象

尝试一下。

body{position:relative;}
.container{
height:800px;
}

footer{
position:absolute;
bottom:0;
left:0;
}

<div class="container">
        <div class="row h-100">
            <div class="col">
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
            </div>
        </div>
        <footer>
          <h1>contact us</h1>
        </footer>
    </div>

Answer 2

使用position:sticky;

container{position:relative;}
footer{position:sticky;bottom:0;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row h-100">
        <div class="col">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </div>
    </div>
    <footer>
      <h1>contact us</h1>
    </footer>
</div>

或将position:relative与.container一起使用.col{padding-bottom:5rem; }

.container{
position:relative;
}
.col{
padding-bottom:5rem;
}
footer{
   
   position: absolute;
    bottom: 0;
    }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row h-100">
            <div class="col">
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
              <p>content</p>
            </div>
        </div>
        <footer>
          <h1>contact us</h1>
        </footer>
    </div>

Answer 3

如果您希望它粘在container的底部，请使用position: relative或完全删除position，得到相同的结果。

Answer 4

您可以使用下面的示例。

 
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 50px;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  background-color: #efefef;
  text-align: center;
}

<div class="demo">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.</p>
</div>

<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>

将引导程序页脚粘贴在内容的底部

4 个答案: