CODEWITHSUNDEEP
htmlcssfooterabsolute
Cushite R
Cushite R

Reputation: 11

My footer won't stay at the bottom if the content gets too long

So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:absolute;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}


Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
    <html>
    <body>
    <div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>
    </body>

</html>

Upvotes: 1

Views: 604

Answers (4)

Victor
Victor

Reputation: 31

<body>
    <section class="wrapper">
        <main class="content">
            content
        </main>

        <footer class="footer">
            footer
        </footer>
    </section>
</body>


html {
   position: relative;
   min-height: 100%;
}

body{
  margin: 0 0 60px 0;
}

/* don't do that */
/*  .wrapper {
  position: relative;
}  */

.content {
  background: green;
  height: 200px;
  /* height: 700px; */
}

footer{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    height: 60px;
    background-color: orange;
}

How about this https://jsfiddle.net/zkto8o88/2/.

.footer class will search for the nearest parent with relative position which in this case is html tag.

If the .wrapper class would have the position relative property then it would not work.

Upvotes: 1

JENKINS J
JENKINS J

Reputation: 153

Try to use this above in Css code

<div style="width: 100%;height: auto;border:1px solid red;float:left;">
            <div style="width: 100%;height: auto;border:1px solid green;float:left;">

            </div>
            <div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">

            </div>
        </div>

Upvotes: 2

Jainam
Jainam

Reputation: 2660

Please try this css and see fiddle link:

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
  background: #0000ff none repeat scroll 0 0;
  height: 1300px;
  left: 20%;
  position: relative;
  width: 1024px;
}

.container {
  background: #0000ff none repeat scroll 0 0;
  height: 86px;
  left: 20%;
  margin-bottom: 3%;
  max-height: 300px;
  position: relative;
  top: 0;
  width: 1024px;
}

#footer {
  background: #f2f2f2 none repeat scroll 0 0;
  bottom: 0;
  color: #000099;
  height: 100px;
  left: 0;
  max-height: 900px;
  position: absolute;
  width: 100%;
}

https://jsfiddle.net/tn30t1k7/2/

Otherwise you can reffer this link:

http://www.cssstickyfooter.com/

Upvotes: 1

Nirpendra Patel
Nirpendra Patel

Reputation: 679

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:fixed;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}
<div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>

change #footer to 

position:fixed;

Upvotes: 1

Related Questions