1 reply [Last post]
noy2014
noy2014's picture
Offline
newbie
Last seen: 6 years 48 weeks ago
Timezone: GMT-4
Joined: 2012-03-02
Posts: 2
Points: 6

I've been at this for too long. I'm having issues with; height:100%.
I want to put 3 containers; each a different color and inside the other, with about 20px padding. This should produce a framed-in look for the inner most container.

I can get the outer most container to fit 100% height of the screen, but I can not get the middle and inner containers to do the same. How do I get inside containers to 100% height as well.

Here is my best attempt.

(outer)
#containerGREY {
min-height: 100%;
padding: 20px;
background-color: gray;
margin: 0 auto;
width: 800px;
}
(middle)
#containerSILVER {
height: 100%;
padding: 20px;
background-color: silver;
}
(inner)
#containerBEIGE {
background-color: #FFFFCC;
height: 100%;
}

AttachmentSize
100% Height CSS Layout 2012-03-02 19-25-13.png33.18 KB
bijayjoshi
bijayjoshi's picture
Offline
Regular
Patan, Nepal
Last seen: 7 years 9 weeks ago
Patan, Nepal
Timezone: GMT+5.75
Joined: 2012-02-06
Posts: 30
Points: 32

Give 'height:100%' to body

Give 'height:100%' to body and html tag as well.

html,body{
height: 100%;
}

On your stylesheet..

CHeers!

Bijay Josi
Loves Open Web.