Home/ Questions/Q 7972473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:52:42+00:00

The following code works properly <!DOCTYPE html> <html> <head> <title>Working</title> <style type=text/css> html {

  • 0

The following code works properly

<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

while a code using min-height instead of height for body prevents #main from occupying space

<!DOCTYPE html>
<html>
<head>
<title>Not working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  min-height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

Weird thing is when doing an inspect in chrome, in both cases body properly takes up 100% space. In min-height case however the child element min-height: 100%; translates to 0. Why does it happen and is there any workaround? I would like the min-height for my web page for background to work properly and expand as needed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As to “Why does it happen?”

    The min-height property only works if an explicit height is set. The spec reads for a percentage:

    Specifies a percentage for determining the used value. The percentage
    is calculated with respect to the height of the generated box’s
    containing block. If the height of the containing block is not
    specified explicitly (i.e., it depends on content height), and this
    element is not absolutely positioned, the percentage value is treated
    as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’).

    The key point in that is that “If the height of the containing block is not
    specified explicitly (i.e., it depends on content height).” When body is set with min-height, it is still depending on content height for calculation, only it does not allow it to fall below the specified size (in your case, 100% of html height which is explicitly set). However, because body is still depending on content to set its height, then div#main cannot calculate min-height because body does not have an explicit height set.

    Is a “Workaround” Needed?

    It seems that setting body to height: 100% achieves all you want. Whether content is long or content is short.

    Response to Comment on html change of background-color

    I suspect the reason your fiddle with html having background-color set changes things is because of the notations in this spec (quoted below). By setting that on html it changes the canvas rendering itself:

    The background of the root element becomes the background of the
    canvas and covers the entire canvas, anchored (for
    ‘background-position’) at the same point as it would be if it was
    painted only for the root element itself. The root element does not
    paint this background again.

    For HTML documents, however, we recommend that authors specify the
    background for the BODY element rather than the HTML element. For
    documents whose root element is an HTML “HTML” element or an XHTML
    “html” element that has computed values of ‘transparent’ for
    ‘background-color’ and ‘none’ for ‘background-image’, user agents must
    instead use the computed value of the background properties from that
    element’s first HTML “BODY” element or XHTML “body” element child when
    painting backgrounds for the canvas, and must not paint a background
    for that child element. Such backgrounds must also be anchored at the
    same point as they would be if they were painted only for the root
    element.

    • 0