Results 1 to 2 of 2

Thread: Div headers and footers and resize contents

  1. #1
    alanmac Guest

    Div headers and footers and resize contents

    I have the following code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <link href="Container.css" type="text/css" rel="Stylesheet"/>
    </head>
    <body>
    <div class="outercontainer">
    <div class="innercontainer">
    <div class="header">
    header<br />
    header<br />
    header<br />
    header<br />
    header<br />
    header<br />
    header<br />
    </div>
    <div class="content">
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    content <br />
    </div>
    </div>
    <div class="footer">
    footer
    footer<br />
    </div>
    </div>
    </body>
    </html>

    And the following css:
    .outercontainer { overflow:visible; background:#cccccc; border:0px }
    .innercontainer { overflow:visible}
    .header { overflow : visible; background:yellow }
    .content { overflow : auto; background:red; height:200px; }
    .footer { overflow : visible; background:green;}

    What I am trying to do is when the window is resized, have the footer stick to the bottom of the page, and the content expand.

    The code is generated by asp, and we have to have a set height for the form initially.

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    This may not be exactly what you want, but it does make the footer stick to the bottom.

    http://www.wickham43.supanet.com/for...mac081205.html

    You say that you want the footer stick to the bottom of the page, and the content expand. but if your content div is 200px high with overflow: auto it will never expand; only the content below it in innercontainer with the pink background.

    There is another method of making a footer stick to the bottom here:-
    http://www.wickham43.supanet.com/tut...footerfix.html
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •