Div height 100% within another div

HTML & CSS
1

Hello,

I have a CSS layout, where the container div is set to 100% height to fit the screen. Now if I wanted a div nested within that container to also be 100% height, how would I go about doing that?

This is the page, as you can see the bottom div sits quite high up on an empty page, so I would like the middle (white) div to also be 100% in height.

http://eldercharts.com/members.php

http://eldercharts.com/style.css < My style sheet, for convenience

Cheers

2

Is that the correct link you gave? I can’t connect to it.

3

In keeping with the spirit of SPF (lately)… you are WRONG Ralph! Is it a link or is a interconnection. I think an interconnection is more fitting in this case and here is why … endless ramble … Next time you will think twice before you so loosely post your thoughts.

4

I got network timeouts upon trying the links.

Edit-Eric, I found your impression of looneynoop funny :).

5

hehehehe!

6

Thanks guys haha.

Is anyone else having trouble viewing the site? I have had DNS issues of late.

7

OK, link (sorry Eric, interconnection) seems to be working now.

What you are looking for is a “sticky footer”, which isn’t all that easy with CSS, but a nice solution is provided here:

Read through that, and post pack if you have any questions. :slight_smile:

8

Cheers for that Ralph,

Ive got the idea down (http://eldercharts.com/index.php) I can get the footer to sit at the bottom.

Because I use 2 divs, I m finding I can’t get the side borders to sit right, nor can I get the side menu height to sit well. I wrapped my “center” and “side” divs into another div, one with the border-top etc etc but without avail.

Ideas?

9

Hi,

You haven’t accounted correctly for the footer height or width as you seem to have forgotten about the padding you added.:slight_smile:


[B]* {
    margin:0;
    padding:0;
}
/* For layout */
body, html {
    height:100%;
}
body{
    color:#000000;
    background:#EDEDED;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}[/B]
#wrap {
    width:750px;
    margin:auto;
    background:#FFFFFF;
    min-height: 100%;
  [B]  margin-top:-50px;[/B]
    border-left:1px solid #444444;
    border-right:1px solid #555555;
}
[B]* html #wrap {
    height:100%;
}[/B]
#header {
    background:#FFFFFF;
  [B]  border-top: 50px solid #FFFFFF;[/B]
}
#nav {
    height:25px;
    background-color:#EAE6C3;
    text-align:center;
    padding-top:6px;
}
#nav a {
    font-size:90%;
    font-family:Arial;
    font-weight:bold;
    text-decoration:none;
    color:#444444;
}
#sidebar {
    float:right;
    width:190px;
    padding:10px;
    background:#FFFFFF;
}
#sidebar a {
    font-size:100%;
}
#main {
    float:left;
    width:520px;
    padding:10px;
    background:#FFFFFF;
}
#footer {
   [B] width:730px;[/B]
    height:30px;
    padding:10px;
    clear:both;
    background:#BDBCA4;
    color:#FFFFFF;
    text-align:center;
    font-size:80%;
    margin:auto;
    border-left:1px solid #444444;
    border-right:1px solid #555555;
}
#footer a {
    font-size:100%;
    color:#FFFFFF;
}
#member {
    width:730px;
    background:#FFFFFF;
    padding:10px;
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
[B]#wrap:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}[/B]
#forum {
    width:95%;
    padding:10px;
    background:#EAE6c3;
    border:none;
}
#threads {
    width:95%;
    padding: 3px 3px 3px 3px;
    background:#EEEEEE;
    border:2px solid #FFFFFF;
}
#formula {
    width:95%;
    padding: 3px 3px 3px 3px;
    background:#F8D890;
    border:1px dashed #000000;
    font-family: monospace;
    font-size:90%;
}
#postdetails {
    text-align:right;
    font-size:90%;
}
#postdetails b {
    font-size: 100%;
}
/* For text */

p {
    display:inline;
    font-size:inherit;
}
h1 {
    font-size:110%;
    text-decoration:underline;
    margin:0;
    display:inline;
}
h2 {
    font-size:110%;
    text-decoration:none;
    margin:0;
    display:inline;
}
/* For input and forms */

input {
    border:1px solid #000000;
    padding:1px;
    font-size:80%;
}
form {
    margin:0;
    padding:0;
}
table {
    border:none;
    border-collapse:collapse;
}
th, td {
    text-align:left;
    padding:1px;
}
input.submit {
    border:1px solid #000000;
    color:#FFFFFF;
    background:#003366;
}

You also forgot to change the float clearer from #wrapper to #wrap to match your page.

10

Perfect! Thanks for that. :slight_smile: