Question 224418 in Html Question posted in
Some basic documentation can be found here.

Html – Set div height to the same as the parent div

This is my code:

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: var(--background-color-gray);
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.welcome div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-color-black);
}
<div class="content">
    <div class="welcome">
        <img src="resources/images/laptop1.webp" alt="Image not found">
        <div>
            <h1>SOME HEADLINE</h1>
            Some Text Some Text Some Text Some Text Some Text<br>Some Text Some Text Some Text
        </div>
    </div>
</div>

It looks like this
screenshot from my browser (firefox)

I need the div containing "SOME HEADLINE…" to be as high and wide as it’s parent has space available (the black background should be going up and down to the end of the image)

As you can see the width: 100%; in .welcome div works but the height doesn’t. I researched a bit and just can’t find out why the div does not scale to it’s parent. Does somebody know why and how I can fix this?
Thank you very much.

I tried a few different approaches but nothing worked. Most websites say if you have a div in a div and set the inner divs height to 100% it scales up to the borders of the outer div. Why does this not work in my setup?

Tags:

2

Answers


  1. 0

    just change your css little bit..

    .content {
    grid-area: content;
    margin: 5px 0 5px 0;
  }

  .welcome {
    background-color: gray;
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    overflow: hidden;
  }

  .welcome div {
    border: 1px solid red;
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
    color: white;
  }
    Login or Signup to reply.
  2. 0

    By setting align-items: center on the parent you’re telling flex to center it vertically, and because the parent doesn’t have an explicit height, the height: 100% doesn’t do what you might expect.

    You can fix it by

    1. changing align-items to stretch (or just removing the rule altogether since stretch is the default` and
    2. removing the height rule from the div itself to let flexbox handle the height.
    .content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: gray;
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* <====== don't center it, stretch it. */
    overflow: hidden;
}

.welcome div {
    width: 100%;
    /* height: 100%; <============ lose this; let flex handle the height. */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
    color: white;
}
    <div class="content">
    <div class="welcome">
        <img src="//placekitten.com/200" alt="Image not found">
        <div>
            <h1>SOME HEADLINE</h1>
            Some Text Some Text Some Text Some Text Some Text<br>Some Text Some Text Some Text
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search