Div height problems when specifying the measure to be 100%

Question

I am using a div in my html but when I specify the height to 100%, it doesn't take the full height of its parent container. The code looks like this.

<main>
        <h1 class="first-text"></h1>
        <h2 class="first-text"></h2>
        <div class="pictures">
          <div class="arrows">
            <i class="fas fa-arrow-right arrow-right"></i>
            <i class="fas fa-arrow-left arrow-left"></i>
          </div>
          <img src="" width="400" alt="" />
          <img src="" width="400" alt="" />
        </div>
</main>

The problem is that the arrows div is not getting 100% of the height of the pictures div, here is the css.

.pictures{
    width: fit-content; 
    margin: 0px; 
    padding: 0px;
    margin: auto;
    animation: changeImage 1s;
}

.arrows{
    background: blue;
    display: flex;
    height: 100%;
    align-items: center;
    width: 100%;
    position: relative;
    color: white;
}

Hi Jonathan, why do you want .arrows to be the same height as .pictures? Is it to get the individual arrows to be vertically centred with respect to the pictures? If so, then I suggest .pictures {display:flex; align-items:center;} — Kate, Jul 11 '21 at 17:02
@Jonathan7, I just checked your code, It works for me. I gave fixed height to your parent `div (.pictures)` and checked, I can see your child `.arrows` div is the same height as parent. — user3733831, Jul 11 '21 at 17:11

score 0 · Answer 1 · answered Jul 11 '21 at 17:00

Try this. I made main, body, html 100%, and then made .pictures 100% as well. Your .arrows was getting 100% of the parent, but the parent was collapsed to nothing.

<!DOCTYPE html>
<html>
<head>
<style>
main, body, html { height: 100%; }
.pictures{
    width: fit-content;
    height: 100%;
    margin: 0px; 
    padding: 0px;
    margin: auto;
    animation: changeImage 1s;
}

.arrows{
    background: blue;
    display: flex;
    height: 100%;
    align-items: center;
    width: 100%;
    position: relative;
    color: white;
}
</style>
</head>
<body>

<main>
        <h1 class="first-text"></h1>
        <h2 class="first-text"></h2>
        <div class="pictures">
          <div class="arrows">
            <i class="fas fa-arrow-right arrow-right"></i>
            <i class="fas fa-arrow-left arrow-left"></i>
          </div>
          <img src="" width="400" alt="" />
          <img src="" width="400" alt="" />
        </div>
</main>

</body>
</html>

Div height problems when specifying the measure to be 100%

1 Answers1