I think the answer is in your question itself. I have used a footer div but I use position:relative or fixed.
I have other elements. You can use % for the height offset. -Girish On Mon, Jul 29, 2013 at 6:42 PM, Mohan R <[email protected]> wrote: > Hi, > > A beginner question, I need to place a div to always stay at bottom of > the viewport even if there is no other element in the html page. > > <!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="utf-8"> > <title>Test</title> > <style> > #footer { > position: relative; > bottom: 0px; > } > </style> > </head> > <body> > <div id="footer"> Test Footer </div> > </body> > </html> > > In the embedded css, I used "position: relative" which I thought will > accomplish my requirement, but its not working as I expected, If there > is no other element in the page, then this div goes to top. > > I can use "position: absolute" or "position: fixed" to make the div stay > at end. But If the page grows, they overlap with other growing elements. > > I need to make the #footer div, always stay at bottom, if the page > grows, then it should stay at bottom and it should not overlap with > other growing elements. > > how to make it? Need CSS experts guidence. Went through lot of pages > (flex boxes, flux columns, setting height: 100% to <html> tag etc.,) > nothing works. > > Thanks, > Mohan R > > _______________________________________________ > ILUGC Mailing List: > http://www.ae.iitm.ac.in/mailman/listinfo/ilugc > ILUGC Mailing List Guidelines: > http://ilugc.in/mailinglist-guidelines -- Gayatri Hitech http://gayatri-hitech.com _______________________________________________ ILUGC Mailing List: http://www.ae.iitm.ac.in/mailman/listinfo/ilugc ILUGC Mailing List Guidelines: http://ilugc.in/mailinglist-guidelines
