将bootstrap页脚粘贴在内容的底部

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{position:relative;}
 footer{position:absolute;bottom:0;}
 <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>

   
</div> </div>

0

6 答案

If you want it to be at the bottom of the page & not the viewport you have to set height for the content so that the absolute footer will be at the bottom.

Else change its relative parent class. Here I set body as the parent for the footer

试试这个..

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body{position:relative;}
.container{
height:800px;
}

footer{
position:absolute;
bottom:0;
left:0;
}
<div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

1
额外
我已经更新了答案,请看一下!
额外 作者 Viira,
我希望它只是在网页的底部。不粘
额外 作者 ElleWilliamssss,

您可以使用以下示例进行相同操作。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

  
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.


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.


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.


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.

</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>
</div> </div>
0
额外

您可以使用以下示例进行相同操作。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

  
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.


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.


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.


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.

</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>
</div> </div>
0
额外

use position:sticky;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

</div>
</div> </div>

OR use position:relative to .container with .col{padding-bottom:5rem; }

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

0
额外
那是什么意思?
额外 作者 לבני מלכה,
请看我的编辑
额外 作者 לבני מלכה,
不,我不希望它位于视口的底部。我希望它位于页面底部。
额外 作者 ElleWilliamssss,

use position:sticky;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

</div>
</div> </div>

OR use position:relative to .container with .col{padding-bottom:5rem; }

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

0
额外
那是什么意思?
额外 作者 לבני מלכה,
请看我的编辑
额外 作者 לבני מלכה,
不,我不希望它位于视口的底部。我希望它位于页面底部。
额外 作者 ElleWilliamssss,

如果您希望它坚持容器的底部,请使用 position:relative 或完全删除 position ,结果相同。

0
额外