Created
March 12, 2022 15:35
-
-
Save sorin-ref/acdfb9362418584ce8361b47ee9d1055 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body style="text-align: center;"> | |
| <div id="container" style="background-color: red; width: 40%; display: inline-block;"></div> | |
| <div id="reference" style="background-color: green; width: 40%; display: inline-block;"></div> | |
| <script> | |
| let itemCount = 1000, itemHeight = 21; | |
| for (var i = 0; i < itemCount; i++) { | |
| let item = document.createElement('div'); | |
| item.style.height = itemHeight + 'px'; | |
| item.style.backgroundColor = i % 2 == 0 ? '#f0f0f0' : '#e0e0e0'; | |
| container.appendChild(item); | |
| } | |
| let totalHeight = itemCount * itemHeight; | |
| container.style.height = totalHeight + 'px'; | |
| reference.style.height = totalHeight + 'px'; | |
| </script> | |
| </body> | |
| </html> |
Author
Author
Eventually, I've simply decided to scale down the reference element based on the left "grid"'s actual height (not "reference" anymore, indeed). 🙃
let totalHeight = itemCount * itemHeight;
// container.style.height = totalHeight + 'px';
reference.style.height = totalHeight + 'px';
reference.style.transform = 'scaleY(' + (container.clientHeight / reference.clientHeight) + ')'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The red background shouldn't be there at all, at the bottom of the browser window, but it does appear on certain zoom browser levels, e.g. 85% on Safari (macOS):
