Css height in percent not working

css

responsive-design

best-practices

css-units

byAlex Kataev·Nov 13, 2024

When setting CSS height in percent, it's crucial to make sure the element's immediate parent has a fixed height. This is because the percentage is computed relative to the parent's height, thus without a defined height for the parent, the percentage value will float aimlessly like a lost pong ball:

.parent { 
  height: 300px; /* Nice and roomy like a high-ceiling loft */ 
}

.child { 
  height: 50%; /* Cozies up to half of whatever .parent is lending. Now 50% = 150px */ 
}

Notice how we give a height to our .parent character? With that, their .child understands how big 50% should be.

For those aiming to achieve full viewport height, independent of parent sizes, here's a hot tip: use the vh unit. Think of it as a rebel child who doesn't care about parent's rules:

.fullscreen-div { height: 100vh; /* Always fills up the screen like a well-trained pet. */ }

And for designers juggling nested elements, use the flexbox or grid layout. They offer more control and autonomy than a hormonal teenager.

Parent-child relationships in CSS: Decoding the heights

When you size using percentage in CSS, it's like a game of hide and seek with the parent element. If the parent doesn't have a height set, the child's percentage height turns into a game of invisible hide and seek - it just doesn't work.

Building the CSS family home

html, body { height: 100%; width: 100%; /* Building lot dimensions sorted */}

This sets the stage for the following nested elements to play height percentages out correctly. Think of it as building a home for your CSS family.

Going rogue: using viewport units

.banner { height: 50vh; /* Freewheeling at 50% of the viewport height! */ }

Just as we have some free spirits amongst us who value personal space above family ties, viewport units like vh, vw, vmin, and vmax let your elements be.

Flexing control with Flexbox and Grid

.container {
  display: flex;
  flex-direction: column;
  /* Super comfy Flexbox-style home with rearrangeable rooms! */
}
.container > .child {
  flex: 1; /* All children enjoy equal space. No sibling rivalry here! */
}

With Flexbox and Grid, you can tell elements to fill up the available space, giving them more room and you more control. It's modern architecture for modern CSS homes.

Resolving the sneaky and unexpected

Padding and margin ninjas

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; /* No sneaky extra space for borders or padding */
}

Resetting default padding and margins is like having pest control on speed dial, it stops layout bugs in their tracks.

The style tugs-of-war a.k.a. conflicting styles

Conflicting styles can sometimes override your height settings in an arm-wrestling contest. Low blow, I know. Identifying them is a critical step in tackling this issue.

'vh' units: The modern trend

The vh units are the hipsters of modern browsers and have been around since IE9+. Although, you can't ignore some attention-seeking mobile browsers that demand special treatment with svh, lvh, dvh units.

JavaScript: The knight in shining armor

When CSS throws a tantrum, you can always count on JavaScript to keep things running smoothly:

const element = document.querySelector('.dynamic-height');
element.style.height = `${window.innerHeight * 0.5}px`; // The half-blood viewport spell

explain-codes / Css / Css height in percent not working

Linked

How to make a div 100% height of the browser window



Div height set as percentage of screen?



Child inside parent with min-height: 100% not inheriting height



Make body have 100% of the browser height



How to make a floated div 100% height of its parent?



Html/css: Making two floating divs the same height



Make a div fill the height of the remaining screen space



Parent-child relationships in CSS: Decoding the heights Resolving the sneaky and unexpected