Home/ Questions/Q 6060821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:52:08+00:00

I have a div: clear:both; position:absolute; bottom:0; left:0; background:red; width:100%; height:200px; And a html,

  • 0

I have a div:

clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

And a html, body:

html, body {
    height:100%;
    width:100%;
}


/* Body styles */
body {
    background:url(../images/background.png) top center no-repeat #101010;
    color:#ffffff;
}

My code is basically 20 loren ipsum paragraphs followed by the div.

Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it

I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.

I tried fixed but that just fixed it.. no use to me

How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, fixed and working 😀 Hope it does what you want it to.
    Preview here: http://jsfiddle.net/URbCZ/2/

    <html>
    <body style="padding:0;">
        <div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
            test content :D
        </div>
        <!--Content Here-->
    </div>
    </body>
</html>
    • 0