Adjust the parent element's height based on the child element's height, taking into consideration their respective positions

Is there a way to adjust the height of the parent element that has a relative position based on the height of child elements with absolute position?

In the example below, the height of the .parent element is displaying as 0px

Note: I am looking for a solution without using any scripts

Expected Outcome:

https://i.sstatic.net/9jxPQ.png

Current Outcome:

https://i.sstatic.net/Z0gTl.png

jsFiddle Link

HTML Code:

<div class="parent">
    <div class="child" style="top:20px;">Hello</div>
    <div class="child" style="top:40px;">Some content</div>
    <div class="child" style="top:60px;">Some more content</div>
</div>

CSS Styles:

.parent{position:relative;background:green;height:100%;border:1px solid #000000;width:250px;}
.child{position:absolute;}
htmlcss

Answer №1

Using CSS alone, this code snippet allows you to achieve a specific visual effect.

By creating pseudo elements on the first and last child elements, a green background is displayed while also cleverly hiding parts of the design to create the desired look. The border is also implemented using these pseudo elements.

https://i.sstatic.net/MCWpK.png

.parent {
  position: relative;
  width: 250px;
}

.child,
.child::before,
.child::after {
  box-sizing: border-box;
}

.child {
  position: absolute;
}

.child:first-child::before {
  content: '';
  position: absolute;
  bottom: 1em;
  background-color: white;
  width: 250px;
  height: 100vh;
  z-index: -1;
  border-bottom: 1px solid #000000;
}

.child:last-child::before {
  content: '';
  position: absolute;
  bottom: 0;
  background-color: green;
  width: 250px;
  height: 100vh;
  border: 1px solid #000000;
  border-top-width: 0;
  z-index: -2;
}
<div class="parent">
  <div class="child" style="top:20px;">Hello</div>
  <div class="child" style="top:40px;">Some content</div>
  <div class="child" style="top:60px;">Some more content</div>
</div>

It should be noted that this technique does not allow for setting the height of the parent element. Additionally, it assumes that the background above the parent is white, which may not be universally applicable (though adjustments can be made).

Answer №2

Modify the CSS code from height:100% to height:100px, or adjust it according to your needs, in the parent class.

Since absolute positioning does not have a defined height, you need to specify a height for the parent element.

.parent{
    position:relative;
    background:green;
    height:100px;
    border:1px solid #000000;
    width:250px;
}

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

Identifying rectangular shapes in an image and overlaying a div on top using Jquery

I am currently exploring the possibility of achieving the following: Imagine having an image within a div (serving as the background image). This image resembles an Excel sheet. My goal is to generate an input tag or contenteditable div when a user clicks ...

javascriptjqueryhtmlcss

Modifying the default actions of Material UI components: A step-by-step guide

In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...

cssreactjsmaterial-ui

Iterating through a JavaScript object and displaying the outcomes within the identical element

$(document).on('mouseenter', '.grid-img-hover', function() { var container = $(this); var jobId = container.parent().find('.title-wrap-hidden').text(); $.ajax({ url: 'db_client_job_name_lookup.php' ...

javascriptjqueryhtmljsonajax

Using React js to create a blurred background effect when an input field is in focus

I would like to implement an input field similar to the one shown in the image. When the input field is clicked on, I want to blur the background. image example Do I need to use a specific library for this? Currently, I am using Material UI. ...

cssreactjsinputmaterial-uifocus

Tips for avoiding a 500 GET error due to an empty request during page loading

I recently encountered an issue with a form containing a dependent drop-down menu that reloads after form submission to preselect the main choice that was made before submission. The problem arises when the page initially loads without any parameters being ...

javascriptpythonhtmldjangoajax

Is there a way to retrieve a list of li tags using BeautifulSoup4 in Python?

I am attempting to extract information from a Persian webpage where I need to retrieve only 3 li tags out of a ul element that contains 6 of them. The issue is that each li tag also has nested li tags within it, so when I use soup.find_all('li'), ...

pythonhtmlbeautifulsouphtml-parsing

Go to a distant web page, complete the form, and send it in

As the creator of Gearsbook.net, a social network for Gears of War players, I am constantly striving to improve the site's functionality. Currently, it is quite basic and in need of updates. One highly requested feature by users is the ability to lin ...

javascripthtmlajaxforms

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...

javascriptphpjqueryhtml

Error Encountered: Nested textarea not supported in HTML

Below is the code I am working with. The issue lies with the <textarea>. In my form, there is a textarea. When I insert another <textarea> within the ckeditor value (HTML), the inner textarea ends up closing the parent textarea. Is there a sol ...

javascriptjqueryhtmlckeditortextarea

Having trouble with regex failing to capture newlines in sed or perl?

I am currently working on cleaning a CSV file, which involves removing HTML tags within some of the values. I recently found a solution for this issue: by using the following command sed -e 's/<[^>]*>//g' file.html, as suggested in this ...

htmlregexperlcsvsed

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

javascripthtmlreactjstypescriptfrontend

Delegate All Events to the Document

In my current setup, I have over 350 events that look like: $(document).on('click','.removable-init',function(){}); I've noticed a performance issue where some click events are delayed by a fraction of a second. This is happening ...

javascriptjqueryhtmlperformanceevents

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson

Loading a different webpage seamlessly without having to reload the current one

Here is a snippet of my code in okay.html: {% extends "sch/base.html" %} {% load staticfiles %} {% block content %} <div class="row" id="ada"> <form action="" method="post> {% csrf_token %} <div align="center" class="cont ...

javascriptjqueryhtmlajaxdjango-templates

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

"Utilize the attr attribute to showcase an image within an HTML select element

I'm trying to showcase the flag of each country in a dropdown menu. Here is the code I attempted: <select id="slcCountry"> <option flag="https://restcountries.eu/data/afg.svg">AFG</option> <option flag="https://restcountr ...

jqueryhtmlcsshtml-select

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

Arranging rows of a specific height within a table at any location

I need to create a virtual table to browse through a very large dataset. Is there a way to position the rows (with fixed height) anywhere within the table? The issue I am facing is that the table properties automatically adjust the row height, disregarding ...

htmlcss

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

htmlcsscss-floatvertical-alignment

Ensuring radio button validation prior to redirecting to contact form

I created a survey form using HTML and CSS. I am looking to add validation to the questions before redirecting to the Contact form page. Currently, when a user clicks on the submit button in the Survey form, the page redirects to the contact form. Howeve ...

javascriptjqueryhtmlcss