Why is height not working?
Parent does not stretch to child’s height.
I want height to be 100% of the viewport.
Why is element overflowing even though I’ve my height set?
Although width is pretty straightforward, height seems to cause people many problems. Here comes a quick overview on approaching CSS dimensions.
Difference between width and height
No, it’s not about one being horizontal or vertical.
Width
By default width of an element is the width of it’s content. If content is fluid, maximum width will reach window width. If content is not fluid, like an image for example, width will stretch to fit it and so will all the ancestors (unless specified differently). If set relatively, element’s width will be relative to width it would take by default.
Height
Same as above, by default height of an element is the height of it’s content. If the content is fluid, height will stretch indefinitely to fit it. If set relatively, element’s height will be relative to the height of the parent — if set. If the height of parent is not set — the height of the element will stay auto (like: 50% from auto is auto).
That is why relative values of height usually don’t work — because certain conditions must be met beforehand.
I have my measures correct, but it still looks messy?
Here comes a little telltale about box sizing.
As you know, html structure is block-oriented. For element to have height adjustable, it needs to be a block. With element being a block, come some properties you are sure aware of:
Here we have our element. It has width of 404px, because I made window very small, it has height of 18px because font-size is 16px plus line-height, and then it has three values set: margin, padding and border. They are all added on top of element’s dimension.
Let’s now assume I would like to set my width to 50% and have two divs alongside each other (using float for example).
Not working, right? Even in bare eye they are no close to being 50% wide. Let’s calculate margin in this width, maybe this will help:
A bit closer to 50%, but stil too wide to fit. Why is that?
Box-sizing
There is this propety of CSS called box-sizing. By default, size of a div is calculated according to it’s content. This value is called content-box. Therefore, no additional elements like margin, padding or border, even though the two latter are seemingly the inner parts of the element, will be calculated.
This usually causes some troubled with fluid layout. Here comes in handy setting the box-sizing to border-box. This way it would take notice of all the elements attachments up to the border. Like so:
There you go. Two element alongside each other with margins (lighter orange), border and padding!
Relative yet defined workaround(s)
Staying true to pixels is often considered a bad practice in responsive development, but there is a variety of options to choose from once using the power of percents is not working for us.
VH and VW
These are my favourites. With width I like to rely on percents, which I subconsciously consider more fluid (which is not true), but with height, these are lifesavers.
VH is short for viewport height and VW is short for viewport width. This is pretty self explanatory, but let me clarify: these units are like percentage in relation to viewport. They won’t fail you, like with height, where you need a precise value to have it altered. You need an element half the height of the window? height: 50vh; is a way to go.
I might usually stay true to percentage values because when I started, the support for vw and vh wasn’t so good, but according to Can I use, this is no longer the case:
EM and REM
Disclaimer: this are preferably used for font size and font oriented properties, but once you get a hand of them, you might consider using them for many other purposes.
Em is a unit derived from parent’s font size. For instance, the body has font-size set to 16px, so that if we set font-size: 2em for div element, it will have font-size set to 32px. Sounds easy so far? Now let’s put into this div an h2 element with font-size: 1.2em. Let’s see what it computed font size is now in pixels:
38.4px. How? We had 16 px multiplied by 2 in div and then multiplied by 1.2 in h2. The math is 16 * 2 * 1.2 = 38.4
You have to be careful with em, because it set the value based on the direct parent’s value, which can be also derived from the latter’s ancestors.
However, it comes in handy when you specify the other dimensions relatively to each other. Margin half-size of the font? There you go. Height 6 times the line-height? This could be calculated too. I rely on em’s with most of the spacing.
Rem is easier, it is a unit derived from root (html) and only the root. That is why you won’t meet that many surprises or hard maths. To get a better picture about the difference, I highly recommend this article from j.eremy.net where all the nuances are thoroughly explained on screens and snippets.
Flexbox
Sometimes you don’t have to specify the dimensions, you just need to make sure that elements fit with each other. Here comes the display: flex, which is as simple and elegant as powerful when it comes to responsiveness and keeping your grid in order. While I will write an article one day about the troubles and misunderstandings with flexbox, if you need to understand how it works, I highly recommend this (small) bible by CSS Tricks.
Conclusion
This piece was short and very basic, but I see many troubles with nuances of CSS dimensions among the beginners especially. As always, I kindly ask to reach out to me if you have any questions or suggestions how I could expand this subject.
