Maak bootstrap footer vast aan de onderkant van de inhoud

Het is 3 dagen geleden dat ik probeer de voettekst onder aan de inhoud van de webpagina te houden. Ik weet dat er veel soortgelijke vragen zijn, maar ik kon niets vinden als de oplossing. Hier is mijn code:

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

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

Probeer dit..

<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
toegevoegd
Ik heb het antwoord bijgewerkt, zie dat ook!
toegevoegd de auteur Viira, de bron
Ik wil dat het onderaan de webpagina staat. Niet plakkerig
toegevoegd de auteur ElleWilliamssss, de bron

U kunt het onderstaande voorbeeld gebruiken voor hetzelfde.

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

U kunt het onderstaande voorbeeld gebruiken voor hetzelfde.

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

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
toegevoegd
dat wat je bedoelt?
toegevoegd de auteur לבני מלכה, de bron
zie mijn bewerking alstublieft
toegevoegd de auteur לבני מלכה, de bron
Nee, ik wil niet dat het onderaan de viewport staat. Ik wil dat het onderaan de pagina staat.
toegevoegd de auteur ElleWilliamssss, de bron

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
toegevoegd
dat wat je bedoelt?
toegevoegd de auteur לבני מלכה, de bron
zie mijn bewerking alstublieft
toegevoegd de auteur לבני מלכה, de bron
Nee, ik wil niet dat het onderaan de viewport staat. Ik wil dat het onderaan de pagina staat.
toegevoegd de auteur ElleWilliamssss, de bron

Als u wilt dat het onder de container blijft staan, gebruikt u positie: relative of verwijdert u positie volledig, hetzelfde resultaat.

0
toegevoegd