Menu
I'm having problems with a side div that won't get the height to 100% in Chrome. It works just fine in FF.
I'm using:
html, body {
padding: 0px;
width: 100%;
height: 100%;
}
#div {
min-height: 100%;
}
Why is that ?
221
When the address bar is hidden, the full height is the height between the top and bottom of the screen. In Chrome, the full height is the height between the top and bottom of the screen, whether the address bar is visible or not. I’ve written before on how much I dislike user agent sniffing.
To set an element's height equal to the screen's height, set its height value to 100vh . It's easy to break your layout doing this, and you'll need to be aware of which other elements will be impacted, but the viewport is by far the most direct way to set an element's height to 100% of the screen.
Sometimes. CSS always treats percent values as a percentage of the parent element. If you've created a fresh <div> that's only contained by your site's body tag, 100% will probably equate to the screen's height. That is unless you defined a height value for the <body>.
When you define the height of an element using the CSS property and a value that uses pixels, that element will take up that much vertical space in the browser. height: 100px; will take up 100 pixels of vertical space in your design. It does not matter how larger your browser window is, this element will be 100 pixels in height.
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.
110
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
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
