发表新帖
发表新帖

height 100% in Chrome

前端 未结
关注
4 1971
悲&欢浪女
悲&欢浪女 2021-02-02 00:00

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 {

 padd
相关标签:
4条回答
  • 孤独总比滥情好
    2021-02-02 00:34

    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 讨论(0)
  • 猫巷女王i
    2021-02-02 00:41

    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 讨论(0)
  • 你的背包
    2021-02-02 00:45

    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%.

    0 讨论(0)
  • 遥遥无期
    2021-02-02 00:46

    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 讨论(0)
 看不清?
提交回复
热议问题