How to manipulate height:100%; in CSS to make it work
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 <body> and <html>. In order for the percentage height of your p to work, you must set the height of <body> and <html>.
<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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1385
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
