Make the Height of the Parent Div Based on the Position of its Children

Question

Make the Height of the Parent Div Based on the Position of its Children

If you're looking to design a card with three child divs, where only one is visible at a time and transitions smoothly as the user progresses through steps 1, 2, and 3, then you've come to the right place.

In the code snippet provided below, the parent container's height should be dynamically set to span only 30px, matching the height of the children divs. This ensures a neat overlap effect when transitioning from one child div to another.

.container {
  border-style: solid;
  border-width: 2px;
  width: 30px; /* Dynamically set */
}

.childOne {
  position: relative;
  height: 30px;
  background-color: red;
}

.childTwo {
  position: relative;
  top: -30px;
  height: 30px;
  background-color: blue;
}

<div class='container'>
  <div class='childOne'></div>
  <div class='childTwo'></div>
</div>

html css

Answer 1

Answer №1

Utilize CSS grid to ensure that the child elements are placed in the same area:

.container {
  border-style: solid;
  border-width: 2px;
  width: 30px;
  display: grid;
}

.container>* {
  grid-area: 1/1;
  height: 30px;
}

.childOne {
  background-color: red;
}

.childTwo {
  background-color: blue;
}

<div class='container'>
  <div class='childOne'></div>
  <div class='childTwo'></div>
</div>

Answer 2

Utilize CSS grid to ensure that the child elements are placed in the same area:

.container {
  border-style: solid;
  border-width: 2px;
  width: 30px;
  display: grid;
}

.container>* {
  grid-area: 1/1;
  height: 30px;
}

.childOne {
  background-color: red;
}

.childTwo {
  background-color: blue;
}

<div class='container'>
  <div class='childOne'></div>
  <div class='childTwo'></div>
</div>

Answer 3

Answer №2

In my view, the best approach would be to utilize JavaScript for this task. I've put together a sample code snippet for you below. I started by adjusting your CSS and adding comments for the second page (slide) top property:

.container {
        border-style: solid;
        border-width: 2px;
    }

    .childOne {
        position: relative;
        height: 200px;
        background-color: red;
        display: block;
    }

    .childTwo {
        position: relative;
        /*top: -200px;*/
        height: 200px;
        background-color: blue;
        display: none;
    }

I've included two simple buttons to trigger the action, but there are multiple ways to achieve this:

<div class='container'>
    <div class='childOne'></div>
    <div class='childTwo'></div>
</div>

<button onclick="slideTo(1)">Slide One</button>
<button onclick="slideTo(2)">Slide Two</button>

Below is a straightforward function to modify the display property of each page (slide). Since we only have 2 pages, I kept it simple:

<script>
    let childs = document.querySelector(".container");
    let totalPages = childs.children.length;

    function slideTo(page){
        // Convert to integer
        var page = parseInt(page);
        // Pages start at 0
        page -= 1;
        // Invalid page...
        if (page >= totalPages || page < 0){
            return;
        }else{
            if (page === 0){
                childs.children[page].style.display = "block";
                childs.children[page+1].style.display = "none";
            }else{
                childs.children[page-1].style.display = "none";
                childs.children[page].style.display = "block";
            }
        }
    }
</script>

Answer 4

In my view, the best approach would be to utilize JavaScript for this task. I've put together a sample code snippet for you below. I started by adjusting your CSS and adding comments for the second page (slide) top property:

.container {
        border-style: solid;
        border-width: 2px;
    }

    .childOne {
        position: relative;
        height: 200px;
        background-color: red;
        display: block;
    }

    .childTwo {
        position: relative;
        /*top: -200px;*/
        height: 200px;
        background-color: blue;
        display: none;
    }

I've included two simple buttons to trigger the action, but there are multiple ways to achieve this:

<div class='container'>
    <div class='childOne'></div>
    <div class='childTwo'></div>
</div>

<button onclick="slideTo(1)">Slide One</button>
<button onclick="slideTo(2)">Slide Two</button>

Below is a straightforward function to modify the display property of each page (slide). Since we only have 2 pages, I kept it simple:

<script>
    let childs = document.querySelector(".container");
    let totalPages = childs.children.length;

    function slideTo(page){
        // Convert to integer
        var page = parseInt(page);
        // Pages start at 0
        page -= 1;
        // Invalid page...
        if (page >= totalPages || page < 0){
            return;
        }else{
            if (page === 0){
                childs.children[page].style.display = "block";
                childs.children[page+1].style.display = "none";
            }else{
                childs.children[page-1].style.display = "none";
                childs.children[page].style.display = "block";
            }
        }
    }
</script>

Make the Height of the Parent Div Based on the Position of its Children

Answer №1

Answer №2

Similar questions

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Is there a way to specifically target the parent input div using event delegation with jQuery?

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

Tips for creating td/th elements with a consistent width?

Tips for modifying the font style of a Bootstrap form input using a custom font

Tips for creating clickable hyperlinks within a chat platform

HTML5 video player with secondary playlist

Utilize ajaxFileUpload.js to upload 3 images from various input type files in CodeIgniter effortlessly

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Failure occurred when attempting to link and display on the page container

Switch on and activate a button using AngularJS

Create a JavaScript/jQuery function that causes an element to fade in when the mouse is

Updating the text of one option within a selected option using jQuery while iterating through each element in a function

Opting for css3 translate over using position: left for positioning elements

The border is not displaying for the Child Div element

Revamp the appearance of angular material inputs

Utilizing Bootstrap 4 columns to control the height of a separate column

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Undisclosed iFrame technique for uploading files - issue with nested forms

Uncertainty surrounding the extent of a button's scope within an Angular application