Why does setting height:100% sometimes not take effect?

(2) Standard interpretation of width, height

(one)

First, we have to understand:

(1) For the wdith attribute, even if the parent element's width is auto (the default value of width is auto), its percentage is also supported. However, for the height attribute, if the parent element's height is auto (the default value of height is auto), as long as the child element In document flow, the percentage is completely ignored.

Next, let’s do a test first

For example, we want to insert a background image for a div, as shown in the following code

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
      div {
        width: 100%;   /* 这是 多余的，div本就独占一行，为了方便观察而写 */
        height: 100%;  /* 这是无效的 */
      
        background-image: url('./images2/1.jpg') ; /* 插入一个背景图片 */
      }
    </style>
  </head>
  <body>

   <div></div>

</body>
</html>

Checked through the browser toolbar and found that the picture did not appear. But the width takes effect (that is, width:100% is supported), but the height does not take effect (that is, height:100% is not supported), so the height of the background image does not take effect, and the background image cannot be displayed. The calculation of the height value here will be explained further in point 2 of this article (2)

(The width here can change according to the zoom of the browser window, which will be explained in point 2 of this article (2))

In fact, we have to add a valid height value to its parent body, as shown in the following code

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
      body {
        height: 300px; 
      } 

      div {
        width: 100%;   /* 这是 多余的，div本就独占一行，为了方便观察而写 */
        height: 100%;  /* 这是无效的 */
        /* 插入一个背景图片 */
        background-image: url('./images2/1.jpg') ;
      }
    </style>
  </head>
  <body>

   <div></div>

</body>
</html>

Result: The background image will be tiled on the browser

As shown in the picture below, you can find that the height of the background image is consistent with the height of the body we set. At this time, the height of the background image is calculated as

100% * 300px (parent) = 300px

(The width here can change according to the zoom of the browser window, which will be explained in point 2 of this article (2))

However, there is another way to tile the background image, that is, the following code

(Note that this example is a special case)

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
      html,
      body {
        height: 100%; 
      } 

      div {
        width: 100%;   /* 这是 多余的，div本就独占一行，为了方便观察而写 */
        height: 100%;  /* 这是无效的 */
        /* 插入一个背景图片 */
        background-image: url('./images2/1.jpg') ;
      }
    </style>
  </head>
  <body>

   <div></div>

</body>
</html>

It must be both html and body. Adding height:100% will take effect. If you only add it to the body, it will not take effect because the body does not have a specific height value at this time.

Result: Covers the entire window

Next, we continue to explore why width supports width:100%, but height does not support height:100%. Why?

(two)

1. After some practice, we will find that for the element in the document flow, for the percentage height value to work, its parent must have a height value that can take effect.

Let's continue reading

2. The answer is actually given in the specification.

(1) The explanation of height is: If the height of the containing block is not explicitly specified (it can be understood that the height is determined by the content), and the element is not absolutely positioned, the calculated value is auto.

From a specified explanation, height is determined by content. In the above test, if you add content to the div (such as changing the div to <div>hello</div>), then use height:100% without adding a height to its parent body, and it will also take effect, and Background images can also be displayed.

Next, let’s analyze why height:100% fails

That is, if our child sets height:100%, but the parent does not set a height that can take effect, then the parent's default height is auto, and the following will appear:

You should know that auto and percentage calculations cannot be calculated, so

'auto' * 100 / 100 = NaN

This is also a problem where height:100% will fail.

(2) The explanation for width is: If the width of the containing block depends on the width of the element, the resulting layout is undefined in CSS2.1.

"Undefined behavior" means that the specification does not specify what to do, and the browser can act according to its own understanding.

(3) Therefore, if you analyze it according to the standard definition, you will know.

If the height is clear, it is auto, and the height percentage calculation will naturally have no result. There is no such statement for the width, so the width is based on the actual calculated value of the containing block as the base for percentage calculation.

Because the specification explains that the width depends on the width of the element, such as the <div> element, it occupies one line by default, so using width: 100% can take effect, and if it is a <span> tag, then width: 100 % is also ineffective. You can also test the following to know whether it is true or false.

......

In fact, for the height and width attributes, or for most CSS attributes, if you want to understand in depth and analyze an attribute, there is still a lot of articles in it, and you need to continue to practice to gradually understand and master the content.

Why does setting height:100% sometimes not take effect?

おすすめ