How to manipulate height:100%; in CSS to make it work-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

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

巴扎黑

Jun 28, 2017 am 10:02 AM

100%height

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 use`height: 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

@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles