Home/ Questions/Q 895793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T14:37:00+00:00

I’m having problems with a side div that won’t get the height to 100%

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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