How to make a Svelte child component occupy the full height of the page?

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?

You need to sign in to view this answers

Related Post