What does 100% mean in CSS? (2020)

#1

Post by feross » Thu, Jul 08, 2021, 7:47 AM UTC

What does 100% mean in CSS? (2020)
wattenberger.com

Re: What does 100% mean in CSS? (2020)

#2

Post by keithnz » Fri, Jul 09, 2021, 3:53 AM UTC

and the interesting "trick" I learnt the other day for fixed/absolute positioning, if you add

  inset:0rem;
  margin: auto;

it will center vertical and horizontal it without having to translate it

courtesy of Kevin Powell - https://www.youtube.com/watch?v=HOM47v73yG8 ( who I've found to be an amazing resource for learning all kinds of CSS info )

Re: What does 100% mean in CSS? (2020)

#3

Post by jalbertoni » Fri, Jul 09, 2021, 4:00 AM UTC

Not gonna lie, the last example made me happy, but my practical side was screaming "just use flexbox, jeez"

Re: What does 100% mean in CSS? (2020)

#4

Post by jwilber » Fri, Jul 09, 2021, 4:00 AM UTC

Amelia is an awesome person and continues to post awesome, useful content.

I always trip up on height/width being a % of the parent, and just default to using vh instead.

Re: What does 100% mean in CSS? (2020)

#5

Post by DecayingOrganic » Fri, Jul 09, 2021, 4:08 AM UTC

Just a little correction: percentage values are computed based on the element's _containing block_, not parent.

Most of the time, an element's containing block is its parent, but not always.

For more on this: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...

Re: What does 100% mean in CSS? (2020)

#6

Post by varrock » Fri, Jul 09, 2021, 4:42 AM UTC

DecayingOrganic wrote: post #5

Just a little correction: percentage values are computed based on the element's _containing block_, not parent. Most of the time, an element's containing block is its parent, but not always. For more on this: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...

I found the rule about absolutely positioned elements interesting given that I often thought their containing block was the closest relatively positioned parent. As outlined in that documentation, though, it's just the closest element that is not statically positioned.

Re: What does 100% mean in CSS? (2020)

#7

Post by myfonj » Fri, Jul 09, 2021, 5:10 AM UTC

Sadly the most interesting CSS percentage mechanic is missing there:

    background-position

Unlike all other cases, here `background-position-x: [25]%` means:

> "Place image so its inner left [quarter] boundary matches inner left [quarter] boundary of its container."

So 0% = align left edges, 100% = align right edges, 50% = align centers (= center) etc. Super intuitive on the first sight, but I was quite surprised how thought-out it was underneath.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-...

Re: What does 100% mean in CSS? (2020)

#8

Post by continuational » Fri, Jul 09, 2021, 5:11 AM UTC

The slider knobs aren't vertically centered for me on that site (iOS Safari).

Re: What does 100% mean in CSS? (2020)

#9

Post by Brajeshwar » Fri, Jul 09, 2021, 5:31 AM UTC

My CSS skills are rusty. It has been 10+ years since I stopped except for the occasional upkeep and maintenance of my own websites.

However, does this not make it much easier to understand if you are clear and understand the CSS Box Model[1] very well. I remember visualizing it in my head in kinda 3D model of the CSS Box, whenever something obvious do not work while placing objects on the page/layout for the browser. Once you know where your bearing and browser quarks, either you position your mark or find another way inside the Box.

I'm hoping they haven't change the CSS Box Model.

1. https://en.wikipedia.org/wiki/CSS_box_model

Re: What does 100% mean in CSS? (2020)

#10

Post by gsnedders » Fri, Jul 09, 2021, 5:45 AM UTC

What percentages refer to is defined on a property-by-property basis in the specs, so while groups of properties typically have the same semantics, this isn't globally true. (For example, the background-position case already mentioned.)