I here want to know a simple fact:
<div style="position:fixed;height:100%;width:100%;overflow:scroll">
<div style="position:relative">Large content</div>
</div>
Its fine.Again (overflow is placed within the child's style):
<div style="position:fixed;height:100%;width:100%;">
<div style="position:relative;overflow:scroll">Large content</div>
</div>
It doesn't scroll.
I simply want to know the simple reason. Anyone mind to tell me?
The reason is that your parent gets the window height, and is limited to that. However, the child is not limited height-wise, and all the content is visible inside it.
For instance, if you have a text that is 2000px in height, on a 1920x1080 screen, the parent will have a height of ~1000px (visible area), but the child (with the content) will have 2000px in height and scrolling is not required. You can simply add a height or max-height style for the child, which will allow you to use scrolling.
This fiddle is your code, with 15 paragraphs of lorem ipsum text. You can inspect it to see the above.
This fiddle on the other hand adds a max-height: 95% to the child element, and scrolling is possible.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments