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

Question

我正在做噩梦，试图为我认为的简单设计要求找到解决方案。 我创建了一个小提琴来说明我的问题。

我在使用当前布局时遇到的问题是，相对定位的父 div 不会扩展高度以包含绝对位置的子 div——更不用说我还想在50px 的子 div (.quote)。

这是我的 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>

这是我的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;
}

这是我的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
    });

这是我的小提琴： https : //jsfiddle.net/Katrina_B/qvdxe8rw/103/

这就是我想要实现的目标：

狮子的背景图像在它自己的 div (.quoteImage) 中，因为否则我无法实现保持图像比例正确的响应一致性。 例如，我尝试将背景图像属性放在父 div (.quoteStrip) 上，但是图像缩放和大小存在问题。 无论屏幕大小如何，我都希望狮子图像保持页面宽度的 60%。

我还尝试使用 z-index 的各种布局来保持白色 .quote 与狮子略微重叠。 我达到的最接近的替代解决方案（未在我的小提琴中显示）是使用选择器 .quoteStrip:after 使背景图像成为伪元素，这几乎完美地解决了问题，但最终不是一个选项，因为背景图像 url 已加载动态，我必须为该样式使用内联样式。

因此，对于我的小提琴示例中的当前解决方案，我决定必须使用 javascript 来确定 .quote div 的高度，然后将高度样式应用于父 div .quoteStrip。 但它没有按预期工作。 似乎计算的高度可能只是获取 .quote div 的边距和填充，但不包括其中文本的高度，它也是动态生成的，可能是任何长度。 这是因为我在我的文档的头部有我的 javascript 吗？ 应该在其他地方吗？

不幸的是，我的 javascript 技能非常有限，我使用的脚本是从我在网上找到的各种示例拼凑而成的。

任何人都可以提供可行的解决方案或替代方案。 看来我最好的选择是设计一些不同的东西。 简单地决定不稍微重叠图像顶部的引用框会起作用并且很容易，但这不是设计:(

注意：我确实查看了其他几个有类似问题的问题，但找不到确切的 javascript 解决方案。

Answer 1

我不是它会帮助你与否。 但是不要在背景中使用图像，而是使用<img> 。 结帐代码 -

<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>

尽管您需要进行一些 css 更改才能正确设置图像。 检查小提琴示例 - https://jsfiddle.net/honrao_abhishek/oLbdrg13/3/

如果我错了，请随时纠正我。 谢谢。

Answer 2

这是我刚刚为澄清我的观点而制定的草案。 好吧，当您将 100px 添加到计算高度（代码中提到的边距的 2 倍）时，在大屏幕中使用 Brackets 和全尺寸窗口，一切都会变得完美。 然后在使用 jSfiddle 时出现问题，因为我们有一个小角供预览......您可能注意到我尝试使用媒体查询@media (max-width: 600px) { ，并将边距和填充减少到一半值 25px ！ 我想它已经完成了:)

您需要做的就是继续处理响应式视图以适应其他设备。

 $( 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>