Jump to content

100% height to a div help


Darkmatter5

Recommended Posts

When I employed the use of tables to create sections of my site and I'd use 100% height to stretch the cell to fill the remaining portion of the window it would work fine.  I've been playing with CSS and if I do the following, the content div doesn't seem to fill the window height.  I'm really wanting the footer div to sit along at least the bottom edge of the window unless there is more data in the content div that pushes it past the bottom window edge, in that case at srcoll bar would activate to view that "off the window" content.  How can I do this?

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $page_title; ?></title>
<link href="library/config.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
  <div id="m_banner"></div>
  <div id="m_menu"></div>
  <div id="m_content"></div>
  <div id="m_footer"></div>
</div>
</body>
</html>

 

#main {
    height: 100%;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
#m_banner {
    height: 45px;
width: inherit;
z-index: 2;
    border-bottom: 1px solid black;
}
#m_menu {
    height: 24px;
    width: 750px;
    z-index: 2;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
#m_content {
    height: 100%;
    width: 750px;
    overflow: auto;
    z-index: 2;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
#m_footer {
    height: 25px;
    width: 750px;
    z-index: 2;
    border-right: 1px solid black;
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.