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 and . In order for the percentage height of your p to work, you must set the height of and .
<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!
That Time I Tried Browsing the Web Without CSSApr 21, 2025 am 10:38 AMCSS is what gives every website its design. Websites sure aren’t very fun and friendly without it! I’ve read about somebody going a week without JavaScript
Creating a Diversity Scholarship Program for Your ConferenceApr 21, 2025 am 10:34 AMMy partner and I ran a design and development conference company for eight years. During that time, we produced hundreds of hours of conferences, both on-site
Interviewing for a Technical Position Doesn't Have to Be ScaryApr 21, 2025 am 10:33 AMJacob Schatz (@jakecodes) is a staff engineer over at GitLab and was kind enough to share how he conducts job interviews for technical positions and his
Could Grouping HTML Classes Make Them More Readable?Apr 21, 2025 am 10:32 AMYou can have multiple classes on an HTML element:
The Thinking Behind Simplifying Event HandlersApr 21, 2025 am 10:31 AMEvents are used to respond when a user clicks somewhere, focuses on a link with their keyboard, and changes the text in a form. When I first started learning
Netlify Functions for Sending EmailsApr 21, 2025 am 10:27 AMLet's say you're rocking a JAMstack-style site (no server-side languages in use), but you want to do something rather dynamic like send an email. Not a
Who Are Design Systems For?Apr 21, 2025 am 10:25 AMSpecific design systems, I mean. Design systems, as a concept, are something just about any site can benefit from.
Tabs: It's Complicated™Apr 21, 2025 am 10:23 AMI've said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes.
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
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
