CODEWITHSUNDEEP
csstwitter-bootstrap
Valachio
Valachio

Reputation: 1135

Bootstrap/CSS - Keep footer at bottom even without enough content

I know this is a duplicate question, I've read through many questions on this particular question like this one.

But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.

Some combos I tried:

html, body{
    height: 100%;
    min-height: 100%;
}

html{
    height: 100%;
}

body {
    min-height: 100%;
}

html{
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    min-height: 100%;
}

My HTML layout:

<html>
    <head>
        ... stuff
    </head>
    <body class=".container">
        ... stuff
    </body>
</html>

Upvotes: 1

Views: 4206

Answers (4)

jamawe
jamawe

Reputation: 256

Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:

The html structure:

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>
</html>

And the CSS accordingly:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Upvotes: 0

Stephen Amsel
Stephen Amsel

Reputation: 91

You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.

I recommend using something like

body {
  height: calc(100vh - 100px);
}

if you want to leave 100 px for your header and footer

Upvotes: 3

Obsidian Age
Obsidian Age

Reputation: 42384

What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:

body {
  margin: 0;
}

div {
  padding: 5px;
}

.container {
  background: #DDD;
  height: 50px;
}

.footer {
  position: fixed;
  bottom: 0px;
  height: 20px;
  width: 100%;
  background: #DDD;
}
<body>
  <div class="container">Text</div>
  <div class="footer">Copyright</div>
</body>

Hope this helps! :)

Upvotes: 2

Smokey Dawson
Smokey Dawson

Reputation: 9240

you can use this code to create a fixed footer at the bottom of your page 

.yourfooterclass {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn

Upvotes: 1

Related Questions