The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the isotope plugin).

<section id="section1" class="cd-section"> // pos. static/relative has height 0px
    <div class="itemIso"> // pos. absolute, height ~900px
        div1
    </div>
    <div class="itemIso"> // pos. absolute, height ~700px
        div2
    </div>
    <div class="itemIso"> // pos. absolute, height ~600px
        div3
    </div>
</section>

Check out this image: https://i.stack.imgur.com/UIqQr.png

The issue I'm facing is that since the divs have position absolute and the section1 is static/relative, its height is 0. I want it to be the sum of the heights of the divs, which in this case would be 900+700+600=2200px. However, as I have six of these sections, setting a fixed height is not ideal since it might change.

Is there any jQuery, JavaScript, or other solution to solve this problem?

htmlcsspositionheightabsolute

Answer №1

By utilizing JQuery...

It is important to note that this particular example does not take into consideration the placement of the child divs, only their respective heights.

$(function() {
  var sectionHeight = 0;

  $("#section1 > div").each(function() {
    sectionHeight += $(this).height();
  });

  $('#section1').height(sectionHeight);
});
.cd-section {
  position: relative;
  background: lightgrey;
  border: 5px solid red;
}

.cd-section>div {
  position: absolute;
  height: 200px;
  width: 100%;
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section1" class="cd-section">
  <div class="itemIso">
  </div>
  <div class="itemIso">
  </div>
  <div class="itemIso">
  </div>
</section>

Answer №2

To ensure the optimal solution, it is recommended to recalculate the section's height after any changes in the children's height. This can be achieved by invoking the calculateHeight() function following actions such as loading images, adjusting fonts, or resizing the screen. Additionally, it is important to prevent external plugins from overlapping elements, similar to the second and third sections in the provided example.

function calculateHeight(){
  var maxHeight = 0;

  $(".section > div").each(function() {
    var height = $(this).height();   
    height += $(this).position().top;    
    
    if (height > maxHeight)
        maxHeight = height;
  });

  $('.section').height(maxHeight);
}


$(function() {
  
  calculateHeight();
  
  $(window).resize(calculateHeight);
});
.section{
  position: relative; 
  background: red;
}

.section-i{
  position :absolute;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  
}

.section-i.s1{
  top: 15px;
  height: 100px;
}

.section-i.s2{
  top: 130px;
  height: 200px;
}

.section-i.s3{
  top: 300px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section">
  <div class="section-i s1">
  </div>
  <div class="section-i s2">
  </div>
  <div class="section-i s3">
  </div>
</section>

Your issue should now be resolved!

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

Troubleshooting issues with the Bootstrap dropdown menu

I am struggling to get a dropdown menu working properly with Bootstrap. Despite looking through similar questions on this forum, I have not yet found a solution that works for me. Below is the HTML head section of my code: <!DOCTYPE html PUBLIC '- ...

javascriptjqueryhtmlcsstwitter-bootstrap

Exploring Font Choices: Customizing Your Text Style

I've been attempting to incorporate my own font into my website, but despite researching several Stack Overflow articles, I'm facing various browser-specific and path-related issues. Sadly, I haven't been able to successfully display my font ...

htmlcssfonts

Search for and swap out a parameter value within an array located in a div using jQuery

A query I have is regarding a div where I am aiming to update the value of a parameter within an array. The PHP code I am using to create the HTML is as follows: <div id="data1<?php echo $data['id']; ?>" data-url="<?php echo 'p ...

jqueryhtml

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible): import React, {useState} from 'react'; import './Button.css&ap ...

cssreactjs

The dropdown menu fails to function when placed within a div or generated dynamically

When I try to utilize the "dropdown-menu" outside of a div, it works correctly. However, when it is placed inside a div or added dynamically, it does not work as intended. Here is an example on jsfiddle The code snippet is as follows: <link rel="s ...

javascripthtmljquerydrop-down-menubootstrap-5

Break up the content in table cells with a new line character

How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...

css

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Currently, I am encountering an issue with changing the color when a user clicks on a list item using the latest version of knockout js. My goal is to change the color of a list item when it is clicked and maintain that color until another item is clicked, ...

javascriptjquerycssknockout.jsknockout-3.0

Switch up the Thumbnail Image based on the selected category

While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...

javascriptphphtmljquerycss

Efficiently transferring input to a Typescript file

Is there a better way to capture user input in Angular and pass it to TypeScript? <form > <input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" /> </form> The current method involves creating a ...

htmlangulartypescript

Leaflet OSM: Adjust map focus to the polygon's center

Looking to create an HTML file that integrates the Leaflet library to display an OpenStreetMap view with a centered polygon? I've been following a helpful discussion, but still unsure about how to center and autozoom an arbitrary polygon on the map. A ...

javascripthtmlopenstreetmapleaflet

Increase the height and width of the inner divs to match the outer div while reducing the number of inner divs

Within my HTML structure, I have three vertical divs that each contain multiple inner div elements. I am looking to achieve a responsive layout where the inner divs wrap into either a 2-column or 1-column grid based on the browser's height and width. ...

jqueryhtmlcss

After uploading my website, I noticed that one of the tabs appears in Chinese

After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...

htmlcss

What are some solutions for adjusting this sidebar for mobile devices?

My mobile version sidebar is not functioning properly on my website. To see the issue, you can visit Zinexium. As I am new to HTML, I don't know how to fix it. Here is a link to the code. Thank you! <!DOCTYPE html> // Code snip ...

htmlcss

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

Adding padding with and without child elements

As I work on styling a basic menu, I'm struggling to find a solution for adding padding to list items so they all have a consistent look. The challenge arises from the fact that I have an unordered list where list items may or may not contain an anch ...

css

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

htmlcss

The Div overlay vanishes once the Javascript function is finished running

Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...

javascripthtmlcss

LESS — transforming data URIs with a painting mixin

Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...

javascriptnode.jscsslessdata-uri

CSS Selector for when a radio button is selected

I'm currently using images in place of radio buttons: <label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick=" ...

htmlcss

Ways to change the background image when hovering in a React component

I'm having trouble trying to scale my background image by 1.5 when the user's mouse enters. Here is the code I have so far: import React from 'react'; import Slider from './index'; import horizontalCss from './css/hori ...

javascriptcssreactjs