I'm running into this problem with a program I'm working on and I can't figure out the solution. Basically I have a webapp, on initial render the entire page is height X. There is a background color, and that color covers the full height of the page.
Moments after the initial render, data is fetched asynchronously and added to the page. The data causes the total height of the page to get larger. Unfortunately, only the original height of the page shows the background color, below that the background becomes white.
On further investigation, I've discovered this is due to a parent div not resizing when the child div does. Basically, the div getting elements added to it by the asynchronous data loading grows in height, but the parent wrapping around it (and the one that has the background color) does not.
During my investigation, I have found a partial solution: set the "height" to "auto". The problem with this solution is when the page initially loads, the background color is only applied to the part of the page with actual content, rather than filling the screen. So if I have the height at "auto", the color is screwed up when the page first loads before correcting itself after the items are added, and if the height is "100%" then the color is screwed up after the items are added.
I've put together a barebones HTML file that re-creates the issue:
<!DOCTYPE html>
<html>
<head>
<title>Layout Test</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#root {
background-color: cyan;
height: 100%;
}
#root > h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<h1>Layout Test</h1>
<div id="container"></div>
</div>
<script>
setTimeout(() => {
const container = document.querySelector('#container');
for (let i = 0; i < 100; i++) {
const h1 = document.createElement('h1');
h1.textContent = 'Hello';
container.appendChild(h1);
}
}, 1000);
</script>
</body>
</html>
You could set min-height: 100vh; on the #root element CSS so that it is always at least the height of the viewport.
Setting the a min-height of 100% on the #root, instead of a height, seems to do the trick:
<!DOCTYPE html>
<html>
<head>
<title>Layout Test</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#root {
background-color: cyan;
min-height: 100%;
}
#root > h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<h1>Layout Test</h1>
<div id="container"></div>
</div>
<script>
setTimeout(() => {
const container = document.querySelector('#container');
for (let i = 0; i < 100; i++) {
const h1 = document.createElement('h1');
h1.textContent = 'Hello';
container.appendChild(h1);
}
}, 1000);
</script>
</body>
</html>
You could use height: fit-content; and width: fit-content; on the parent element