I'm having problems with a sidediv that wont get the height to 100% in chrome. It works just fine in FF. Im using
html, body {
padding: 0px;
width: 100%;
height: 100%;
}
#div {
min-height: 100%;
}
Why is that ?
views:
66answers:
3
+2
A:
From http://doctype.com/give-two-nested-divs-100-minheight:
The child element inherits the height of the parent container only if it is specified explicitly. But min-height is not an explicit specification of height, so the computed height is "auto" and not 100%.
Sjoerd
2010-06-26 15:35:32
Wow, so the answer is to set both **height** and **min-height** to **100%**? Or just **height** and leave **min-height** out?
harpo
2010-06-26 15:40:11
+4
A:
This works perfect for me on every browser :
<!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>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; background-color: gray; }
</style>
</head>
<body>
<div id="div">test</div>
</body>
</html>
Can you provide more details?
Edit
Here is the updated version based on the provided information :
<!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>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
.contents { height: 100%; width: 780px; margin-left: auto;
margin-right: auto; text-align: left; }
#right { float: left; width: 217px; min-height: 100%; background:#4b805b; }
</style>
</head>
<body>
<div class="contents">
<div id="right">test</div>
</div>
</body>
</html>
Still everything looks fine for Chrome, Firefox and IE8
Diadistis
2010-06-26 15:36:01
i don't know what else to add this is all the css of the container//I REALLY DONT KNOW HOW TO FORMAT THE CODE FOR STACKOVERFLOW SORRY ! #right { float: left; width: 217px; min-height: 100%; background:#4b805b; }and this is the hole body/html html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; } body { font-family: "Tahoma CE", "Arial CE", "Helvetica CE", Tahoma, Arial, lucida, sans-serif; font-size: 12px; background:url(images/bk.jpg) repeat-x fixed; }
andrei
2010-06-26 15:41:45
Please edit your question and provide a minified version of the html. What matters is your html layout, not your CSS.
Diadistis
2010-06-26 15:48:17
I really can't do that, i haven't written the code(which is a mess btw) i'm just the debugger (does the fact that the sidebar is included via php have something to do with this ? )
andrei
2010-06-26 15:51:42
No, PHP doesn't affect anything. Just make sure that `#right` div is directly inside `body` and not inside some other container element. If it is then adjust your styles so each and every parent element has either `height: 100%;` or `min-height: 100%;`
Diadistis
2010-06-26 15:55:09
.contents { height: 100%; width: 780px; margin-left: auto; margin-right: auto; text-align: left; }so thats a yes
andrei
2010-06-26 16:09:01
I have updated the sample based on your partial information. It works as expected. There must be something that you're missing. Please provide a sample, don't make us do all the work for you...
Diadistis
2010-06-26 16:25:23
@andrei: You can copy-paste the HTML from your browser, just choose View > Page Source or something like that.
Marcel Korpel
2010-06-26 16:32:24
A:
You have to specify your parent with 100% height as well as the child so
html,body{
height: 100%;
}
#div{
min-height: 100%;
height: auto !important;
height: 100%; /*for IE*/
}
The !important will overwrite all other height rules. Try that you should have no problems.
CarterMan
2010-06-26 16:29:30