CODEWITHSUNDEEP
javascripthtmljquerycsscss-position
user16358489
user16358489

Reputation:

Calculate height of div with absolute child divs that have no height set

I have a section with a relatively positioned container that has absolutely positioned child divs in it. I want the container to have its height set to the height of the absolute positioned child divs in it so the title “Photography” always falls straight below it.

Does someone know how I can manage this in JS or JQuery? I preferred JS as it's lighter.

I need this because when I set a fixed height on the container the title below the section does not stay at the same place as seen in: https://www.loom.com/share/f2d77408f9164e138c008705807d17f4

Thank you.

Edit: I need to use position relative and absolute because I need to control/move each div individually, separate for each other as seen in the Loom video and for extra explanation look at the screenshots below.

enter image description here

enter image description here

body {
  background-color: hsla(38, 0.00%, 86.67%, 1.00);
}

.section {
  width: 100%;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.container {
  position: relative;
  width: 90vw;
  margin-right: auto;
  margin-left: auto;
}

.item {
  position: absolute;
  width: 15vw;
}

.item.item-1 {
  right: 0px;
  margin-top: 10%;
}

.item.item-2 {
  margin-top: 5%;
  margin-left: 25vw;
}

.item-image {
  box-shadow: 14px 14px 20px 0 hsla(0, 0.00%, 71.33%, 1.00);
}

img {
  border: 0;
  vertical-align: middle;
  display: inline-block;
  max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<h1>Design</h1>
<div class="section">
  <div class="container">
    <div class="item item-2">
      <img src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586618f65c8e59b4cc9e_silvan-soeters-portfolio-alidaracz.jpg" alt="" class="item-image">
    </div>
    <div class="item item-1">
      <img src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
    </div>
  </div>
</div>
<h2>Photography</h2>
</body>

</html>

Upvotes: 0

Views: 79

Answers (1)

Paulo Fernando
Paulo Fernando

Reputation: 3660

I still believe you should try to solve this using only CSS, to control what you need using javascript is going to be extremely hard.

Check if this way it will help you:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
  background-color: hsla(38, 0.00%, 86.67%, 1.00);
}

.section {
  width: 100%;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.container {
  width: 90vw;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  margin-right: auto;
  margin-left: auto;
}

.item {
  width: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.item-image {
  box-shadow: 14px 14px 20px 0 hsla(0, 0.00%, 71.33%, 1.00);
}

img {
  border: 0;
  vertical-align: middle;
  display: inline-block;
  max-width: 100%;
}
  </style>
</head>

<body>
<h1>Design</h1>
<div class="section">
  <div class="container">
    <div class="item">
      <img src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586618f65c8e59b4cc9e_silvan-soeters-portfolio-alidaracz.jpg" alt="" class="item-image">
    </div>
    <div class="item">
      <img style="height: 300px; width: 15vw" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
      <img src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
    </div>
    <div class="item" style="justify-content: space-between; padding-bottom: 15vw;">
      <img style="height: 250px; width: 15vw" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
      <img style="height: 300px; width: 15vw" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
    </div>
    <div class="item">
      <img style="height: 350px; width: 15vw" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
      <img style="height: 300px; width: 15vw" src="https://uploads-ssl.webflow.com/6296730d233387c2703a6964/62da586654008a5077e6a647_silvan-soeters-portfolio-draaimolen.jpg" alt="" class="item-image">
    </div>
  </div>
</div>
<h2>Photography</h2>
</body>

</html>

Upvotes: 1

Related Questions