CODEWITHSUNDEEP
htmlcsspositioning
judi55
judi55

Reputation: 11

setting a footer to the contents or pages end

I'm looking for a possibility to set the footer to the end of my page or the end of my content if the content is greater than one page. I do not want to have a fixed footer where the content is scrollable. I do not know whether it is possible.

So, this is my code. The div with class="div1" contains the content. The content contains the content as well as the footer.


<div class="div1">
   <div class="content">
      <div class="myContent"></div>
      <div class="myContent"></div>
      <div class="myContent"></div>
      <div class="footer"></div>
   </div>
</div>

The footer has a height of 50px. My problem is following: If I have a screen height with height:500px and the content is only 150px high, the footer is set after the last div-element with class="myContent". It should be set to the end of the page like the effect I receive with 

bottom:0;position:fixed
But if the content is 600px high the footer should be set right after the last div with class="myContent". No styles would be needed here.

Have you got an idea how to solve it?

Upvotes: 1

Views: 352

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

I think this may help you get rid off this problem:

.footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px}

This may solve the objective:

<div style="position:absolute">
    <div style="position:absolute">
        <div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div>
        <div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div>
        <div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div>
        <div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div>
    </div>
</div>

Upvotes: 1

yossi
yossi

Reputation: 13315

do you mean Make the Footer Stick to the Bottom of a Page ? or this one

the css

html, body {height: 100%;}

#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

and the html

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

Upvotes: 1

Related Questions