Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Content area to the bottom of the footer

Bottom of Page

1 to 4 of 4

  1.  
    • CommentAuthorjanac
    • CommentTimeOct 9th 2008 edited
     permalink
    Hello,

    I return to an issue I've read in previous discussions. I am building a site where the footer needs to be fixed to the bottom of the page which i have done by using absolute positioning. The content area of the page needs to stretch down to the bottom of the footer on any given screen resolution effectively covering the footer in the centre where the content is

    I have tried various methods to get the content area to extend down to the bottom of the page and over lap the footer but nothing seems to work.

    Does anyone know how i might acheive this?

    Thanks in advance
    • CommentAuthorParthiban
    • CommentTimeOct 9th 2008
     permalink
    Hi Janac,

    Can you ink your test site here, so that it 'll be easy to tell where to fix.
    • CommentAuthorjanac
    • CommentTimeOct 9th 2008 edited
     permalink
    Oh, sorry, I can't but I could include the structure:

    <style>
    html,form { margin:0px;
    height:100%;}

    body { margin: 0;
    padding: 0;
    height: 100%;
    color: #000000;}



    div#container { width: 100%;
    height : auto !important;
    height : 100%;
    min-height : 100%;
    background: #FFFFFF;
    margin: 0 auto;}

    div#header { height: 47px;
    padding: 0 0px 0 0px; }

    div#menu { height: 47px;
    padding: 0 0px 0 0px; }



    div#footer { position: relative;
    margin:-35px auto 0;
    height: 35px;
    width: 100%;
    padding: 0 0px;
    border-top: 1px solid black;
    background-color: #E8E8E8;
    font-size: 10px;
    color: #000000;
    overflow: hidden; }


    </style>
    <body>

    <div id="container">
    <div id="header">div>
    <div id="menu</div>
    <div id="main"></div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

    I would like main div to stretch down to the bottom of the footer on any given screen resolution. All the solutions, I've seen, including this one, go to the bottom of the browser, under the footer (put a border: 1px and you'll see), so if the main contents are too long, they are hidden by the footer...
    • CommentAuthorwebcare.me
    • CommentTimeJan 15th 2009
     permalink
    I have been banned cause I'm an idiot
    can you post a screenshot? so we can see the prob.

1 to 4 of 4

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page