#Why does 50% of height not work?

4 messages · Page 1 of 1 (latest)

coral sparrow
dusty river
#

It does work, but maybe not like you think. What do you want it to be 50% of the height of?

olive prawn
#

The percentage unit is dependent of a parent element, so to make it work you'll be needing a parent element

dark stirrup
#

There are some details to take into consideration when it comes to heights of elements as jason and Nabeel already said.
First of all your screenshot doesn't show whether the #pixeltoem element is an inline or block element and how it is nested in the dom.
This guy has a good video on how to set max heights. I am sure you can learn something from it.
https://www.youtube.com/watch?v=0pP3Ao_5AIE

Additionally I would read through some officiall resources. It doesn't take too much time reading it and it sure will give you a better understanding.
https://developer.mozilla.org/en-US/docs/Web/CSS/height?retiredLocale=de

YouTube
ByteGrad
Make a Div 100% Height of Browser Window / Screen

👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: https://bytegrad.com/courses/professional-css
👉 Email newsletter (React + Next.js course out soon!): https://email.bytegrad.com

💻 Premium Courses:
Professional JavaScript: https://bytegrad.com/courses/professional-javascript
Profess...

▶ Play video
MDN Web Docs
height - CSS: Cascading Style Sheets | MDN

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.