Css, how to give an element the same height and width as its parent-CodePudding

how to give an element the same height and width as its parent.

i have this code html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style-home.css">
    </head>
    <body>
        <section id="section-home">
            <video autoplay="" muted="" loop="" id="video-background-home"> 
                <source src="../../multimedia/video/background-home.mp4" type="video/mp4">
            </video>

            <div id="container-text-home">
                <p id="text-title-home">Test</p>
                <p id="text-subtitle-home">Test</p>
            </div>
        </section>
        
    </body>
</html>

The container-text-home must have the same height and width of the "section-home".

The size of "section" depends on the relative size of the video tag inside it.

The video size is: width: 100%

CodePudding user response：

@Anas Araid

In this way it work, but my css file is:

body
{
    margin: 0px;
    padding: 0px;

    overflow-x: hidden;
}

@media screen and (min-width: 600px) 
{
    #section-home
    {
        margin: auto;
        padding: auto;
    }

    #video-background-home
    {
        width: 100%;
    }

    #container-text-home
    {
        position: absolute;
        top: 0px;
        left: 0px;

        display: flex;

        width: auto;
        height: auto;
        

        flex-direction: column;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;

        gap: 1rem;
    }

    #container-text-home p
    {
        z-index: 1;
        
        margin: 0;
        padding: 0;

        font-family: Helvetica;

        font-weight: 700;
        letter-spacing: 1.7px;

        background: -webkit-linear-gradient(232deg, #F84100, #F9D213);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        text-shadow: 0px 18px 30px rgba(0, 0, 0, 0.5);   
    }
}

So, with this code united with your it doesn't work

CodePudding user response：

If I understand correctly what you're trying to do, I think this would do the trick :

#section-home {
  background-color: green;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

#video-background-home {
  width: 400px;
  background-color: red;
}

#container-text-home {
 background-color: blue;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style-home.css">
    </head>
    <body>
        <section id="section-home">
            <div id="video-background-home"> 
              video
            </div>

            <div id="container-text-home">
                <p id="text-title-home">Test</p>
                <p id="text-subtitle-home">Test</p>
            </div>
        </section>
        
    </body>
</html>

Detailed explanation

display: flex;
flex-direction: column

This makes section-home a Flex container. Flexbox is a tool for allocating space between children inside the flex element. In our case, this allows the container-text-home element to grow veritcally to fill the space

      width: fit-content;

This makes the parent container fit the width of the video. This works because the video here has an explicit width.

The container-text-home automatically strech to fill the cross-axis. This is the default behavior