height 100% in Chrome
I'm having problems with a side div that won't get the height to 100% in Chrome开发者_如何学Python. It works just fine in FF.
I'm using:
html, body {
padding: 0px;
width: 100%;
height: 100%;
}
#div {
min-height: 100%;
}
Why is that ?
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
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%.
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.
Check with Below code, working and Printing labels fine for me under Zebra GC420d label printer:
<!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>
<meta charset="utf-8">
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; }
</style>
</head>
<body>
<div style="border: 0px solid red;">
<table border="0" width="100%" align="center">
<tr>
<td style="text-align: center;">
<?php
echo $name;
?>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td style="text-align: center;">
<?php
echo 'https://goo.gl/2QvRXf';
?>
</td>
</tr>
</table>
</div>
</body>
</html>
Hope it helps!
加载中,请稍侯......
精彩评论