DIV Full height
- Started
- Last post
- 10 Responses
- pillhead
I'm a bit stuck here.
Hoe do you get a DIV to auto stretch the full height of the it's container DIV, but the container DIV cannot have height specified.
- aanderton0
http://webforumz.com/html-xhtml-…
This might help. Not sure though.
- pillhead0
#centreBg #mainContent {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
background-position: left bottom;
padding: 0px;
}
#centreBg #mainContent #mcBocLeft {
width: 179px;
float: left;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
height: 100%;
}
#centreBg #mainContent #mcBocLeft #textboxDS {
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
width: 150px;
height: 100%;
background-image: url(../images/lines_mian_content...
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0%;
margin-left: 0px;
}- I need the #textboxDS to stretch the full height of #mainContentpillhead
- brandelec0
i think your parent div needs an assigned height so you can set your div to height:100%
- brandelec0
html, body { height:100%; }
- jamble0
http://www.dave-woods.co.uk/?p=1…
To be honest though, I've always found the 100% height on the html tag a bit buggy and if you really need to do it, try finding a bit of javascript to sort it as it's sometimes more robust.
- pillhead0
Parent DIv #mainContent needs to remain elastic
- brandelec0
how come #mainContent doesn't have height of 100% ?
- it's holding content so will just expand automatically, you don't have to have 100%pillhead
- try it, it might inherit the body height of 100%brandelec
- Sorry #mainContent is holding a float right DIV to which is holding content, so will auto expandpillhead
- tried it?pillhead
- ah i see, so you don't want to be 100%brandelec
- you'll need js for this then, you need to catch the height of your mainContent, which is dynamic, so you can assign it to your child divbrandelec
- Josev0
I've been trying to do this myself without using clearfloats. I cant believe there isnt a way to do this without javascript.
- HAYZ1LLA0
Is it not working because of your doc type?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- fugged0
fyi, no need to reference nodes like this :#centreBg #mainContent #mcBocLeft
Since those are IDs (and need to be unique), there's no need to supply any ancestral nodes. You can simply reference it as: #mcBocLeft