I'm trying to build a simple front-end with Svelte, where I have a main page with different possible child components. My problem is that I can't get the child component to take up the full height of the page.
Here is a simplified version of my code:
<script>
import Child from './Prueba2.svelte';
</script>
<style>
.prueba {
flex: 1;
background-color: grey;
height: 100%;
}
footer {
background-color: red;
color: white;
text-align: center;
padding: 10px 0;
font-size: 0.9em;
}
.prueba_container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.child {
background-color: purple;
height: 100%;
}
</style>
<div class="prueba_container">
<div class="prueba">
<Child/>
</div>
<footer>
<p>Footer</p>
</footer>
</div>
Prueba2.svelte:
<style>
.prueba_child {
flex: 1;
background-color: orange;
height: 100%;
}
</style>
<div class="prueba_child">
This should occupy the whole screen
</div>
I tried setting flex: 1 and height: 100%, but it doesn't seem to work as expected. The prueba_child div is supposed to take up the full screen height, but it doesn't. What am I doing wrong, and how can I make the child component occupy the full height?
The outer container .prueba_container
does not have a set height
, which causes the height: 100%
of the descendants to not apply properly. Setting any height
in addition to the min-height
, even height: 0
, should help.
The flex
approach does not work because the parent is not a flex container. Adding display: flex; flex-direction: column;
to .prueba
should also fix the issue.