ブートストラップフッターをコンテンツの下部に貼り付ける

フッターをWebページコンテンツの一番下に固定するようにしてから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,
Webページの一番下に表示したいです。べたつかない
追加された 著者 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,

container の一番下に貼り付けたい場合は、 position:relative を使用するか、単に position を完全に削除しても同じ結果になります。

0
追加された