Html and body height 100

How to fix CSS height 100 not working

Fix issues with setting height 100%. This post goes over four steps to identify and fix setting height 100.

Dec 9, 2022 | Read time 8 minutes

🔔 Table of contents

One frustrating thing when design web pages is the height 100% not working correctly. For example, the content overflows from the parent!

The main reason why using CSS height:100 property is not working for your design is mainly due to how the parent is structured.

This post will go over a few steps or checklist on how to approach this issue.

Steps to take to fix height 100% not working issues

1. Check that the HTML and CSS is valid — no typos, and use on non-replaced inline elements
2. Check the parent element height. The additionally, check if there is content in the element.
3. Are you using min-height or max-height? These properties override the values of height .
4. Remove height settings if using flex layouts.

Check that the HTML and CSS is valid!

CSS height property can be applied to all elements and controls the height of the content area.

The first thing to check when it is not working is to check the syntax. Check that you are not having any typos, or using invalid values, etc:

   When using percentages (%), also make sure that you are specifying the number correctly. The following will not be valid numbers to use for percentages:

Tip: Height will not work with non-replaced inline elements.

Check the parent element height

When we set an element to be height:100% , we need to consider the parent element. According to the specifications, when using percentages, the height is calculated as the percentage of the containing block’s height.

In most cases, we need to explicitly specify the height of the parent element ( body and html tag) to height:100% .

Take the following example when specifying height 100% on the .main class is not working:

 See the Pen Untitled by ⭐ Kentaro ⭐ (@kentaro_au) on CodePen.

To fix this, we specify a height for the and tags:

Tip: Make sure to specify the height of both body and html tags

Are you using min-height or max-height?

An example of when height 100% will not work is when you have not properly used the min-height or max-height . Lets consider the following code that will not work:

  Similar to the previous example, since the and tags do not specify the height value, the height:100% on the .main class will not take effect.

The min-height CSS property just sets the minimum height of the element. To fix this, we just change the min-height to height on the html and body tags.

Remove height settings if using flex layouts

A common misunderstanding with height 100% issues is when we are combining it with flex layouts.

See the Pen Untitled by ⭐ Kentaro ⭐ (@kentaro_au) on CodePen.

 From the example, we cannot see .flex-1 is not appearing at all. We can see that the width for .flex-1 is being applied but not the height 100% setting.

 To fix this, we just need to remove the height:100% and we can see that the .flex-1 with background of acqua is now appearing.

Why does this work? When using flex the align-items control the vertical behavior.

This has the default value of stretch so it just works naturally.

When we introduce height:100% , this overrides the flex calculation.

The calculation of the height of .flex-1 now depends on the parent element ( .container ).

Since the parent does not have a explicit height -> the child element’s height becomes zero.

Tip: Use vh instead of height 100% percentage

vh is the height of the viewport. This will give you a element that covers the height of the viewable area of the screen and would have the intended effect of filling the whole page.

Additionally, depending on the device and orientation, you may want to use vm (eg landscape)

Browser suppport

• height is widely supported with modern browsers and older versions. This is because this value has been fundamental and exists ever since the CSS1 specifications
• some issues with IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
• max-width doesn’t work with images in table cells in IE.

Summary

In this post we looked at a common issue with web design of setting height 100. The most common reason is that the parent element is not explicitly setting the height.

Changing the AND tags to have height:100% will mostly fix the majority of styling issues. Other issues arise when we use flex layouts. It is recommended not to mix height:100% with flex layouts since flex items come initially with align-items:stretch .

Additionally misuse of the min-height and max-height properties can cause issues. These properties can override the height values.

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

Make Take Up 100% of the Browser Height

Ok, so here is the setup! A short while ago, I was trying to listen for mouse events on the body of a mostly empty page. What I wanted to do was make the body element take up the full height of the page so that I have a giant hit target that I can do all sorts of event-related shenanigans on. Knowing what I had to do, I specified the body element in the HTML and wrote some CSS that looked as follows:

When I previewed this page in the browser, this is what I saw:

From what you and I can see, the body element seems to take up the full size of the page. The yellow background color we specified in the CSS fills up everything. Life seems good. Right? Despite what you see, this is one of the many cases involving HTML and CSS where looks can be deceiving. Your body element literally has a height of 0. Let’s pause for a moment and let that sink in. Take a measured walk around the room if needed.

Once you are ready, read on to learn both why you have such a bizarre height and how to fix it so that our body element truly takes up 100% of the available space.

How Percentage Sizes are Calculated

In HTML and CSS, some of the greatest mysteries revolve around two things:

To follow along and help explain the confusion around this topic, take a look at the following markup:

This is the full markup for the example you saw earlier, and if you preview all of this in your browser, you’ll see an empty page with a yellow background. Our goal is to have our body element take up the full height of the page, and despite overwhelming evidence to the contrary, that isn’t happening right now. You can verify that this isn’t happening when you inspect the height of the body element using an in-browser development tool such as what you get with Chrome:

Notice that the reported height of the body element in the box model visualization is in fact 0 pixels. This means that your body element might as well not exist from a visual point of view. What is going on here?

To fully understand what is going on here, let’s learn a bit about how the html and body elements are sized along with some general height calculation trivia. By default, both the html element and body element have their height CSS property set to auto. This means they don’t have an explicit height out of the box. They’ll either take up whatever height they are told to be, or they will take up whatever height of the content that is inside them.

Doesn’t the highlighted line satisfy the «they’ll take up whatever height they are told to be» part of what I wrote earlier? The answer is “No” and the reason has to do with what a percentage value for height actually means. Allow me to bore you with the relevant information from the spec:

The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to ‘auto’. A percentage height on the root element is relative to the initial containing block.

The emphasized part holds the key. See, our body element’s height is set to be 100% of the height of the containing block. The containing block is the html element, and we never specified a height on it. Because there isn’t any content on the page, the height of the html element. wait for it. is also 0. The solution to our problem then would be to specify a height value of 100% on the html element as well:

Once you do this, the height of our body element naturally becomes the 100% height that we had always wanted it to be:

There is just one more thing we need to do. Your body element will often contain more content than can be displayed in one screen of your browser. In such cases, you will want a scrollbar to appear and not have your body element’s size fixed to whatever initial size your browser was. There is an easy fix to address this valid concern — replace the height property on the body element with min-height instead:

This will ensure your body element’s size grows along with the content inside it. If you have no content in your body element, the body will take up all the space available to it anyway.

Conclusion

The twisted path to writing this article started with something completely unrelated — making the body element a click/hit area as big as the browser window. Figuring all of this out was 80% fun and 20% frustrating, but the result is that I learned a lot about how sizing in HTML/CSS works. I hope my rambling writing here helped you to learn more about it as well.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

• Arrays From Noob to Ninja
  • BUY
• JavaScript Absolute Beginner’s Guide
  • BUY
• Learning React:
  A Hands-on Guide
  • BUY
• Creating Web Animations
  • BUY

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 — delivered weekly to over a bazillion subscribers!

Serving you freshly baked content since 1998!
Killer hosting by GoDaddy

Источник