CODEWITHSUNDEEP
htmlcssfooter
samach
samach

Reputation: 3394

Place a footer with Content positioned as absolute

I have a wrapper class that contains all the content on the web page. the problem is if the content is absolutely placed, it eats my footer. I have to place the content as absolute positioned.

It seems like the footer doesnot recognize that the content is absolute. Heres my code

<style>

* {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {

    height: 4em;
    }
 </style>
 </head>

<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>

If I change the image style by removing the position:absolute property , everything looks normal. so my question is how can we place the footer at the bottom with absolute positioned contents?

Upvotes: 2

Views: 1274

Answers (2)

Rob W
Rob W

Reputation: 349012

Updated answer, regarding comment.
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. So, I will show the JavaScript approach. Add relevant IDs (see Fiddle), and add the following code at the end of your body. This code snippet will resize your wrapper when necessary.
Note: When the page is smaller than the window's height, the page wrapper will still take the full height, because it's not possible to distinguish a height change by an absolutely positioned element.

<script>
(function(){
    var wrapper = document.getElementById("wrapper");
    var height = document.documentElement.scrollHeight;
    wrapper.style.height = height + "px";
})();
</script>

Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.

To fix your code, apply the following CSS (only showing relevant CSS, updated postfixed by descriptive comments). Fiddle: http://jsfiddle.net/4ja2V/

html, body {
    height: 100%;
    width: 100%;
    padding: 0; /* Get rid off the padding */
}
.wrapper {
    position: relative; /* Necessary to properly deal with absolutely positioned
                           child elements. */
    height: 100%;
    margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
    height: 4em;
    position: fixed; /* Positions your footer at a fixed position in the window*/
    bottom: 0; /* At the bottom of the window*/
}

You were using a negative bottom-margin for .wrapper, which caused the element to "eat" the footer. When you're using absolutely poisitioned inner elements, there's no reliable pure-CSS method to get the real width/height of the .wrapper element. Hence the appearance of position:fixed.

The footer is defined to have a height of 4em. Because the footer is positioned at a fixed position (ie, the element won't move when scrolling down), it's necessary to apply an additional margin at the bottom of the wrapper element.

Upvotes: 2

Shaheer
Shaheer

Reputation: 2147

give your footer a fixed hight and then in your absolute class, do 

bottom: heightOfYourFooter + 5px;

Upvotes: 0

Related Questions