• Locked
1 reply [Last post]
Thu, 2013-07-25 13:30
jstuardo
Offline
Regular
Last seen: 9 years 44 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

Hello..

I am trying to do something very simple but I could not do it for 2 days now.

I have this simple HTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            html, body {
                margin:0;
                padding:0;
                height:100%;
            }            
            .container
            {
                position:relative;    
                height: 100%;
                overflow: hidden;
            }
            .header
            {
                height: 180px;
                width: 100%;
                background-color: #ccc;
            }
            .content
            {
                height:100%;
                width: 100%;
                background-color: #00f;
            }
            .footer
            {
                height: 72px;
                position:absolute;
                bottom:0;
                width:100%; 
            }            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">Some header</div>        
            <div class="content">Some content...</div>
            <div class="footer">Some footer</div>
        </div>
    </body>
</html>

As you see, I only want the footer to be placed at the bottom of the screen. The problem is that middle div expands to occupy even the footer space. When I remove height: 100% in .content, the middle div does not expand.

Any help will be greatly appreciated,

Thanks
Jaime

Top
Tags:
Sun, 2013-07-28 10:04
#1
surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 8 years 15 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

a little change in the logic

You don't need to absolute position the bottom div, you can just have the main container & the body to be 100%; that should push the bottom div always at the bottom & even if the content increase or decrease will not affect it - if content increase the div is pushed down, if not, stays down - have modified the code a bit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            html, body {
                margin:0;
                padding:0;
                height:100%;
            }            
            .container
            {
                /* position:relative;*/
                height: 100%;
                /* overflow: hidden; */
            }
            .header
            {
                height: 180px;
                width: 100%;
                background-color: #ccc;
            }
            .content
            {
                /* height:100%; */
                width: 100%;
                background-color: #00f;
            }
            .footer
            {
                height: 72px;
                /* position:absolute; */
                /* bottom:0; */
                width:100%; 
            }            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">Some header</div>        
            <div class="content">Some content...</div>
 
        </div>
        <div class="footer">Some footer</div>
    </body>
</html>

Web Technology Institute in Pune

Top
  • Locked