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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1664
14
1423
52
1318
25
1268
29
1248
24
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
While You Weren't Looking, CSS Gradients Got Better
Apr 11, 2025 am 09:16 AM
One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item:
How to Build Vue Components in a WordPress Theme
Apr 11, 2025 am 11:03 AM
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
A Comparison of Static Form Providers
Apr 16, 2025 am 11:20 AM
Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML
The Three Types of Code
Apr 11, 2025 pm 12:02 PM
Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to
PHP is A-OK for Templating
Apr 11, 2025 am 11:04 AM
PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic
