www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to fill the whole page?

  1. #1
    Join Date
    Mar 2009
    Posts
    2

    Exclamation How to fill the whole page?

    Hey guys,

    I am developing a loayout based on ccs. I would like to have a main container (where the information changes and therefore its size) that changes its size in order to fill all the screen. However, for pages where there is not a lot of information, the footer remains "attached" to the main content, not being at the bottom of the screen....

    Could you help me?

    Till now, my layout is like that:

    body {
    background-color: #02AC7D;
    background-image:url(../Images/relevo_3.jpg);
    background-position:center;
    background-repeat:repeat-y;
    margin: 0;
    padding: 0;
    text-align: center;
    border: 0;
    height: 100%;
    }

    .twoColFixLtHdr #container {
    width: 950px;
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    border: 0;
    height: 100%;
    }

    .twoColFixLtHdr #header1 {
    background: #DDDDDD;
    height: 150px;
    background-image: url(../Images/Fond_up_2.jpg);
    padding: 0;
    }

    .twoColFixLtHdr #header2 {
    background: #DDDDDD;
    height: 35px;
    padding: 0;
    }

    .twoColFixLtHdr #sidebar1 {
    float: left;
    width: 160px;
    background: #FFFFFF;
    padding: 0;
    height: auto;
    }
    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 160px;
    padding: 0 20px;
    height: 100%;
    }

    .twoColFixLtHdr #footer {
    background-image: url(../Images/rodape_2.jpg);
    padding: 0;
    height: 60px;
    width: 950px;
    border-bottom: 0;
    }

    .clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    You could set a
    Code:
    min-height
    for the main content. Or you could
    Code:
    position:abosolute; bottom:0;
    the footer

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles