Using a CSS height of 100% does not always result in filling 100% of the parent's height

My parent div has a height of 250px. I then have multiple children with their min-height set to 100%. While the debugger confirms that the selector is correct and targeting the right elements, the height does not fill the parent's height at all; instead, it remains as small 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c6d8c4">[email protected]</a>/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>

htmlcssbootstrap-5

Answer №1

One reason for this is that parent elements do not have a set height.

When you apply min-height: 100% to an element, it will only occupy the available height if its parent has a fixed height defined.

In this scenario, the parent elements such as .poke_container and .carousel-inner do not have a specific height set, causing the min-height: 100% property to not function as intended.

<!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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Attempting to append a child to a non-existent property

I am currently learning Java Script and this is the code I have been working on. <!doctype html> <html> <head> <style> div {position:absolute; width:500px; height:500px} img {position:absolute} ...

javascripthtmldom

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

html div elements may not align correctly

Currently, I am in the process of coding a website that contains numerous images. To assist me in organizing and arranging these images, I have turned to angularjs. Initially, everything was progressing smoothly until this issue arose: https://i.sstatic. ...

htmlcssangularjs

How to send variables to a function when a value changes in TypeScript and Angular

As someone who is new to Angular and HTML, I am seeking assistance with the following code snippet: <mat-form-field> <mat-select (valueChange)="changeStatus(list.name, card.name)"> <mat-option *ngFor="let i of lists"> {{i.name}} ...

htmlangulartypescript

Retrieve data from json files

After retrieving this object from my controller, I have a name, a list of beans, and a list of operations: { "name": "Charge", "beans": [ ], "operations": [ { "name": "getSize", "returnType": "java.lang.Integer", "descriptio ...

javascripthtmlangularjs

Is there a way to shift my navigation to the right while keeping the (display: inline;) property intact?

Is there a way to align my navbar to the right side while keeping the display: inline; property intact? When I remove the display: inline; property, the li elements automatically align to the right side of the page, but in a list format. HTML <div id= ...

htmlcss

Ensure that all panels are set to the same width as the widest panel

Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"? I want to show you the current look compa ...

htmlcssjquery-uijquery-ui-tabs

No changes occur within this JavaScript code

I am currently working on a piece of Java Script code: document.onreadystateChange = function() { if (document.readystate === "complete") { var menu = document.getElementsByClassName('menu'); var b0 = menu[0]; b0.addE ...

javascripthtml

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

htmlcssangularjs

Steps to reveal a child element when the parent is set to overflow:hidden

There seems to be an issue with a child element having overflow:visible; while the parent element has overflow:hidden;. The height of the child element exceeds that of the parent element. Why is the child element hidden even when its overflow property is ...

cssoverflow

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

What is the best way to display link icons - as images or using CSS background-image URLs?

When designing a web UI, I am considering using iconography to represent actions such as adding, editing, deleting, and searching for items. However, I want to ensure that the purpose of each action is clear without displaying text and cluttering the UI sp ...

cssasp.net-mvciconsbackground-imageimage

What is the best way to relocate the box within this HTML/CSS document?

Looking at this specific HTML webpage <html> <head> <title>CSS Structure</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">Header 900x100 px</div> ...

csshtml

I would like some clarification on how bookmarking works

As I encountered a puzzling issue recently, I realize that I may need some assistance to navigate through it. It involves bookmarking some links for future reference. I attempted to search for answers online but found myself even more perplexed. Does boo ...

html

the side panel is positioned under the main content

Can anyone help me figure out why my sidebar is not positioning correctly next to the content on the right side? No matter what I try, it keeps going underneath the content. Here's the CSS code I'm using: body { font: 10pt Calibri, Helvetica ...

htmlcss

Is it possible to dynamically append and delete rows of interconnected dropdown menus?

I'm currently working on a form that allows users to add and remove rows with cascading dropdowns for class selection. Everything is functional except for the feature to remove selected classes. I've experimented with different methods like the ...

javascripthtmljqueryformsfrontend

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

javascripthtmljquery-uijqueryjquery-tabs

How can I make my div disappear when I click outside of it using jQuery? I am finding the solution on Stack Overflow to be confusing

Utilizing jQuery to conceal a DIV upon clicking outside of it Although I've heard positive feedback about this method, I'm uncertain about its functionality. Can someone provide an explanation? I understand that .has() identifies elements contai ...

javascriptjqueryhtmlcss

"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page. Any suggestions on what I need to change in order to show the border on every printed page? Be ...

htmlcssprinting