Chrome 中高度 100%

发布于 2024-09-07 03:15:28 字数 219 浏览 3 评论 0原文

我遇到了侧面 div 的问题，在 Chrome 中无法将高度设置为 100%。在FF中效果很好。

我正在使用：

html, body {

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

}

#div {

    min-height: 100%; 
}

这是为什么？

原文

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 ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉栀 2024-09-14 03:15:28

这对我来说在每个浏览器上都很完美：

<!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 来说一切看起来都很好

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

回复收藏 0 原文

冷︶言冷语的世界 2024-09-14 03:15:28

来自 http://doctype.com/give-two-nested-divs-100-最小高度：

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

回复收藏 0 原文

ぃ双果 2024-09-14 03:15:28

您必须指定您的父母以及孩子的高度为 100%，因此

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

!important 将覆盖所有其他高度规则。尝试一下应该不会有问题。

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.

回复收藏 0 原文

爱格式化 2024-09-14 03:15:28

检查下面的代码，在 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>

希望有帮助！

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!

回复收藏 0 原文

~没有更多了~