css Question posted in
Some basic documentation can be found here.

Css – 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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You could try editing the css class with:

       prueba_child: {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search