search

Home >Web Front-end >CSS Tutorial >How to manipulate height:100%; in CSS to make it work

How to manipulate height:100%; in CSS to make it work

巴扎黑
巴扎黑Original
2017-06-28 10:02:101603browse

When you set the height of a page element to 100%, you expect the element to fill the entire height of the browser window, but in most cases, this approach has no effect. Do you know why height:100% doesn't work?

According to common sense, when we use the CSS height attribute to define the height of an element, this element should expand the corresponding space distance in the vertical space of the browser according to the settings. For example, if the CSS for a p element is height: 100px;, then it should occupy 100px in the vertical space of the page.

Following the W3C specification, the percentage height needs to be set according to the height of the parent element container of this element. So, if you set the height of a p to height: 50%;, and the height of its parent element is 100px, then the height of this p should be 50px.

Then why height:100%; doesn't work

When designing a page, you place a p element inside, and you want it to occupy the entire window height. Naturally, you would add height to this p: 100%; css attribute. However, if you set the width to <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 100%;, then the width of this element will immediately expand to the entire horizontal width of the window. Does the same happen with height?

wrong.

To understand why not, you need to understand how browsers calculate height and width. Web browsers consider the open width of the browser window when calculating the effective width. If you don't set any default value for the width, the browser will automatically tile the page content to fill the entire horizontal width.

But the calculation method of height is completely different. In fact, the browser does not calculate the height of the content at all unless the content exceeds the scope of the viewport (causing scroll bars to appear). Or you set an absolute height for the entire page. Otherwise, the browser will simply let the content pile down, and the height of the page will not need to be considered at all.

Because the page does not have a default height value, when you set the height of an element to a percentage height, you cannot obtain the height of the parent element, and you cannot calculate your own height. In other words, the height of the parent element is just a default value: height: auto;. When you ask the browser to calculate the percentage height based on such a default value, you only get undefined results. That is, a null value, the browser will not have any response to this value.


The above demonstration example is that the parent element does not set a fixed height, so the height of the child elementheight: 100% will not work either. You can judge that the height of the child element is not 100% based on the background color of the parent element.

So, if you want the percentage height of an elementheight: 100%;For this to work, you need to set a valid value for the height of all parent elements of this element. In other words, you need to do this: 

<html>
  <body>
    <p style="height: 100%;">
      <p>
        想让这个p高度为 100% 。      </p>
    </p>
  </body></html>

Now you gave this p a height of 100%, and it has two parent elements 6c04bd5ca3fcae76e30b72ad730ca86d and 100db36a723c770d327fc0aef2ce13b1. In order for the percentage height of your p to work, you must set the height of 6c04bd5ca3fcae76e30b72ad730ca86d and 100db36a723c770d327fc0aef2ce13b1. 

<html style="height: 100%;">
  <body style="height: 100%;">
    <p style="height: 100%;">
      <p>
        这样这个p的高度就会100%了      </p>
    </p>
  </body></html>


As you can see from this demo, height: 100%;It works.

In useheight: 100%;Some things you need to pay attention to

1. Margins and padding will cause scroll bars to appear on your page, which may not be what you want.

2. If the actual height of your element is greater than the percentage height you set, the height of the element will automatically expand.

The above is the detailed content of How to manipulate height:100%; in CSS to make it work. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The difference between height and line-height in cssNext article：The difference between height and line-height in css

Related articles

See more