如何使用javascript扩展相对位置父div的高度以包围绝对子div

Question

I am having a nightmare trying to find a solution to what i thought was a simple design requirement. I have created a fiddle to illustrate my problem.

The issue I'm encountering using my current layout is that my parent div, which is relatively positioned, won't expand in height to contain the child div which is absolutely position — not to mention i want to also include an even margin around the child div (.quote) of 50px.

Here is my html:

<div id="myContainer">

  <div class="quoteStrip">

     <div class="quoteImage" style="background-image:url('https://www.animationmagazine.net/wordpress/wp-content/uploads/the-lion-king2-1.jpg');"> 
      </div> 


      <div class="quote">
         <p><strong>This  will be dynamically generated quote text of any length.</p>
      </div>

  </div>

</div>

Here is my css:

html body {
  height: 100vh;
  }

#myContainer {
  background-color: #F0F5F9;
  height: 100%;
  padding: 60px 0;
  font-size: 16px;
}

.quoteStrip {
  background-color: #000;
  width: 100%;
  height: 10px;  /*Just so I can see it even exists to begin with */
  padding: 0;
  display: table;
  position: relative;
}

.quoteImage {
  display: table-cell;
  width: 60%;
  height: 100%;
  background-color: coral;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.quoteBlock {
  display: table-cell;
  width: 40%;
  height: 100%;
}

.quote {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  margin: 50px; /* How can I get .quoteStrip to always enclose and include this margin on bottom? */
  background-color: #fff;
  padding: 50px;
  border: 1px solid tomato; /* Just so i can see edge */
}

.quote p {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  line-height: 140%;
  color: #B58f61;
}

Here is my javascript:

// Calculate element (.quote) size and add css styles to .quoteStrip)
    $(function() {
    var quote_height = $(".quote").outerHeight();
    $(".quoteStrip").css("height",quote_height+"px");
    $(".quoteStrip").css("border-top","5px solid DeepPink"); // Just so I can see this javascript is even working
    $(".quoteStrip").css("border-bottom","5px solid DeepPink"); // Just so I can see this javascript is even working
    });

Here is my fiddle: https://jsfiddle.net/Katrina_B/qvdxe8rw/103/

This is what I am trying to achieve:

The background-image of the lion is in it's own div (.quoteImage), because i couldn't achieve a responsive uniformity of keeping the image scale correct otherwise. For example, I tried just putting the background image property on the parent div (.quoteStrip) but there were issues with the image scaling and size. I want the lion image to stay 60% width of the page regardless of screen size.

I also tried using various layouts with z-index to no avail to keep the white .quote slightly overlapping the lion. The closest alternative solution i reached (not shown in my fiddle), was making the background-image a pseudo element with the selector .quoteStrip:after, which almost worked out fantastically, but ultimately was not an option because the background image url is loaded dynamically and I must use inline styling for that style.

So, for the current solution in my fiddle example, i decided that javascript must be used to determine the height of the .quote div to then apply a height style to the parent div .quoteStrip. But it's not working as expected. It seems the height calculated maybe just gets the margin and padding of the .quote div, but doesn't include the height of the text inside it, which is also generated dynamically and might be of any length. Is this because I have my javascript up in the head of my document? Should it be elsewhere?

Unfortunately i have very limited javascript skills and the scripts i use are pieced together from various examples i find online.

Can anyone offer a viable solution or alternative. It seems the best option i have is to design something different. Simply deciding not to slightly overlap the quote box on top of the image would work and be easy, but that's not the design :(

Note: I did look at several other questions with similar problems, but couldn't find an exact javascript solution.

Answer 1

I am not it will help you or not. But instead of using image in background, use <img> . Checkout code -

<div id="myContainer">

  <div class="quoteStrip">

     <!-- <div class="quoteImage" style="background-image:url('https://www.animationmagazine.net/wordpress/wp-content/uploads/the-lion-king2-1.jpg');"> 
      </div>  -->
      <div class="quoteImage" > 
      <img src="https://www.animationmagazine.net/wordpress/wp-content/uploads/the-lion-king2-1.jpg" width="100%" height="100%">
      </div>  


      <div class="quote">
         <p><strong>This  will be dynamically generated quote text of any length. This will be dynamically generated text of any length.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod ipsum et arcu sollicitudin auctor.</p>
      </div>

  </div>

</div>

Though you need make some css changes to set image properly. Check example in fiddle - https://jsfiddle.net/honrao_abhishek/oLbdrg13/3/

Feel free to correct me if I am wrong. Thanks.

Answer 2

This is a draft I just made to clarify my view. Well using Brackets and on full size window in a large screen everything goes perfect when you add 100px to the computed height (2x the margin mentioned in your code). Then the issue while using jSfiddle comes because we have a small corner for preview... You could notice that I tried using a Media query for @media (max-width: 600px) { , and reduced margin and padding to half value 25px ! I think it's done :)

All you need to do is to keep working on the responsive views to fit on other devices.

 $( document ).ready(function() { var quote_height = $(".quote").outerHeight(); $(".quoteStrip").css("height",(quote_height+100)+"px"); $(".quoteStrip").css("border-top","5px solid DeepPink"); // Just so I can see this javascript is even working $(".quoteStrip").css("border-bottom","5px solid DeepPink"); // Just so I can see this javascript is even working }); $(window).resize(function(){ if ($('body').outerWidth() <= 600 ){ var quote_height = $(".quote").outerHeight(); $(".quoteStrip").css("height",(quote_height+50)+"px"); } else if ($('body').outerWidth() > 600 ){ var quote_height = $(".quote").outerHeight(); $(".quoteStrip").css("height",(quote_height+100)+"px"); } });

 html body { height: 100vh; } #myContainer { background-color: #F0F5F9; height: 100%; padding: 30px 0; font-size: 16px; } .quoteStrip { background-color: #000; width: 100%; height: 10px; /*Just so I can see it even exists to begin with */ padding: 0; display: table; position: relative; } .quoteImage { display: table-cell; width: 60%; height: 100%; background-color: coral; background-repeat: no-repeat; background-size: cover; background-position: center; } .quoteBlock { display: table-cell; width: 40%; height: 100%; } .quote { position: absolute; top: 0; right: 0; width: 40%; margin: 50px; /* How can I get .quoteStrip to always enclose and include this margin on bottom? */ background-color: #fff; padding: 50px; border: 1px solid tomato; /* Just so i can see edge */ } .quote p { margin: 0; text-align: center; font-size: 1.5rem; line-height: 140%; color: #B58f61; } @media (max-width: 600px) { .quote { position: absolute; top: 0; right: 0; width: 40%; margin: 25px; /* How can I get .quoteStrip to always enclose and include this margin on bottom? */ background-color: #fff; padding: 25px; border: 1px solid tomato; /* Just so i can see edge */ } .quote p { margin: 0; text-align: center; font-size: 1rem; line-height: 100%; color: #B58f61; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myContainer"> <div class="quoteStrip"> <div class="quoteImage" style="background-image:url('https://www.animationmagazine.net/wordpress/wp-content/uploads/the-lion-king2-1.jpg');"> </div> <div class="quote"> <p><strong>This will be dynamically generated quote text of any length. </strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod ipsum et arekhklqkqllkcu solli will be dynamically generated quote tex will be dynamically generated quote tex will be dynamically generated quote tex will be dynamically generated quote tex will be dynamically generated quote tex will be dynamically generated quote tex will be dynamically generated quote tex will be dynamically generated quote texcitudin auctor.</p> </div> </div> </div>