Question

我遇到的问题是div，但Chrome的高度不会达到100％。它在FF中运行得很好。

我正在使用：

html, body {

 padding: 0px;
 width: 100%;
 height: 100%;

}

#div {

    min-height: 100%; 
}

为什么？

Answer 1

这对我来说非常适合每个浏览器：

<!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>

您能提供更多详情吗？

修改

以下是基于提供的信息的更新版本：

<!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>

Chrome，Firefox和IE8的一切看起来都不错

Answer 2

来自http://doctype.com/give-two-nested-divs-100-minheight：

子元素继承高度仅在父容器的情况下明确指定。但是最小高度不是一个明确的规范高度，所以计算出的高度是 “自动”而不是100％。

Answer 3

您必须指定您的父级100％身高以及孩子

html,body{
     height: 100%;
}
#div{
      min-height: 100%;
  height: auto !important;
  height: 100%; /*for IE*/
}

！important将覆盖所有其他身高规则。试试你应该没有问题。

Answer 4

在Zebra GC420d标签打印机

下查看下面的代码，工作和打印标签

    <!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>

希望它有所帮助！

Chrome中的高度为100％

4 个答案: