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

Html – CSS Height 100% doesn't fill 100% of parent's height

I have a parent div of the height 250px. Then I have a couple of children and set their min-height to 100%. I can tell from the debugger that the selector is correct and selects the correct elements, but the height doesn’t fill the height of the parent at all, and instead is the smallest as the content allows.

:root {
        --poke-main: #e05e8e;
        --poke-secondary: #f5ecc5;
        --poke-tertiary: #b5255a;
    }

    .card {
        border-color: var(--poke-tertiary);
    }

    .poke_tab {
        border-radius: .25rem;
        background-color: var(--poke-main);
        color: var(--poke-secondary);
        min-height: 100%;
    }

    #carousel {
        min-height: 250px;
        background-color: yellow;
    }

    .poke_container, .carousel-inner, .poke_tab, .poke_tab .card {
        min-height: 100%;  /* This doesn't work */
    }

    .poke_container .card {
        background-color: var(--poke-secondary);
        color: var(--poke-tertiary);
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="carousel" class="col-lg-10" >

  <!-- Infobox -->
  <div class="poke_container">
    <div class="carousel-inner">
      <!-- Log Tab -->
      <div class="poke_tab p-2">
        <div class="card">

          test

        </div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    This is because parent elements don’t have a defined height.

    When you set min-height: 100% on an element, it will only take up the available height if its parent has a specific height set.

    In your case, the parent elements like .poke_container and .carousel-inner don’t have a defined height, so the min-height: 100% property doesn’t work as expected.

    <!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --poke-main: #e05e8e;
      --poke-secondary: #f5ecc5;
      --poke-tertiary: #b5255a;
    }

    #carousel {
      min-height: 250px;
      background-color: yellow;
      position: relative; /* Added */
    }

    .poke_container {
      position: absolute; /* Added */
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
    }

    .carousel-inner {
      flex: 1;
      display: flex;
    }

    .poke_tab {
      border-radius: .25rem;
      background-color: var(--poke-main);
      color: var(--poke-secondary);
      flex: 1;
      display: flex;
    }

    .poke_tab .card {
      background-color: var(--poke-secondary);
      color: var(--poke-tertiary);
      border-color: var(--poke-tertiary);
      height: 100%;
      width: 100%; /* Added */
    }
  </style>
</head>
<body>
  <div id="carousel" class="col-lg-10">
    <div class="poke_container">
      <div class="carousel-inner">
        <div class="poke_tab p-2">
          <div class="card">
            test
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    The issue you’re facing with the child elements not filling the height of the parent is likely due to the use of min-height: 100%. When you use min-height, it will take the maximum of either the specified height or 100% of the parent’s height. If the content inside the child doesn’t require the full height, it won’t expand to fill it.

    To ensure that the child elements take up the full height of the parent, you can use the CSS flexbox or grid layout. Here’s an example of how you can modify your code using flexbox:

    #carousel {
    min-height: 250px;
    background-color: yellow;
    display: flex; /* Use flex container */
    flex-direction: column; /* Stack children vertically */
}

.poke_container {
    flex: 1; /* Fill available vertical space */
    display: flex; /* Use flex container */
    flex-direction: column; /* Stack children vertically */
}

    And in your HTML structure, you don’t need min-height: 100% for the child elements:

    <div id="carousel" class="col-lg-10">
  <div class="poke_container">
    <div class="carousel-inner">
      <div class="poke_tab p-2">
        <div class="card">
          test
        </div>
      </div>
    </div>
  </div>
</div>

    With these modifications, the child elements will expand to fill the height of their parent while still accommodating the content’s height. Flexbox is a great way to handle such layouts where you want elements to take up available space dynamically.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search