question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Height percentage doesn't seem to work

See original GitHub issue

When using height: "100%", I expect it to stretch to the bottom of the parent div. However, passing a percentage doesn’t seem to do anything. Passing 100px or auto does work.

Playground: https://codepen.io/dagorbattle/pen/ExNgoqO

I expect the height of the editor to fill to the red border. When the content gets larger than the 100%, then it should overflow the .se-wrapper-inner

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
JiHong88commented, Feb 14, 2021
.sun-editor {
  height: 100%;
}
.sun-editor .se-wrapper {
  height: calc(100% - 94px - 16px); /* 100% - toolbar offsetHeight - bottom resizing bar offsetHeight */
}
0reactions
guido-vissercommented, Feb 15, 2021

Nice, thanks! That works. Still weird though that height: "100%" doesn’t do this. But this fixes the issue, so I’ll close this it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS – why doesn't percentage height work? - Stack Overflow
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is...
Read more >
css - height % does not work - OutSystems
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are...
Read more >
Why is height not working? - Medium
That is why relative values of height usually don't work — because certain conditions must be met beforehand.
Read more >
max-height as percentage issues - CSS-Tricks
You can't base a percentage height on a parent that has no height set otherwise the height should default to auto (content doesn't...
Read more >
How to Use CSS to Set the Height of an HTML Element to 100%
Percentage values in CSS can be tricky. When you set the height CSS property of an element to 100% what exactly are you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found