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

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

我在使用当前布局时遇到的问题是，相对位置的父div不会在高度上扩展以包含绝对位置的子div-更不用说，我还希望在子div（.quote）50px周围包含一个均匀的边距

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

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

// 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
    });

这是我的javascript:

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

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

// 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
    });

这是我的小提琴：

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

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

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

// 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
    });

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

我也尝试过使用不同的z-index布局，但没有成功地保持白色。我找到的最接近的替代解决方案（在我的提琴中没有显示）是使用选择器将背景图像设为伪元素。quoteStrip:after，这几乎实现得很好，但最终不是一个选项，因为背景图像url是动态加载的，我必须对该样式使用内联样式

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

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

任何人都能提供可行的解决方案或替代方案。看来我最好的选择就是设计一些不同的东西。简单地决定不与图像顶部的报价框略微重叠将是可行且容易的，但这不是设计：(

---

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

我不确定它是否会帮助您。但是使用

这将是动态生成的任意长度的报价文本。这将是动态生成的任意长度的文本。Lorem ipsum dolor sit amet，concettetur adipising elit。Nullam euismod ipsum et arcu sollicitudin auctor

虽然您需要进行一些css更改以正确设置图像。 查一查小提琴中的例子-

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

这是我刚刚起草的一份草案，旨在阐明我的观点。使用括号和大屏幕上的全尺寸窗口，当您将100px添加到计算高度（代码中提到的边距的2倍）时，一切都会变得完美。 然后，使用JSFIDLE的问题来了，因为我们有一个小的预览角……您可以注意到，我尝试使用媒体查询

@Media（最大宽度：600px）{

，并将边距和填充减少到一半值25px！我想已经完成了：）

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

$（文档）.ready（函数（）{
var quote_height=$（“.quote”）.outerHeight（）；
$（“.quoteStrip”）.css（“高度”，（quote_高度+100）+“px”）；
$（“.quoteStrip”）.css（“边框顶部”、“5px实心深粉色”）；//这样我就可以看到这个javascript正在工作
$（“.quoteStrip”）.css（“边框底部”，“5px实心深粉色”）；//这样我就可以看到这个javascript正在工作
});   
$（窗口）。调整大小（函数（）{
if（$（'body'）.outerWidth（）600）{
var quote_height=$（“.quote”）.outerHeight（）；
$（“.quoteStrip”）.css（“高度”，（quote_高度+100）+“px”）；
}
})；

html正文{
高度：100vh；
}
#霉菌容器{
背景色：#F0F5F9；
身高：100%；
填充：30px0；
字体大小：16px；
}
配额制{
背景色：#000；
宽度：100%；
高度：10px；/*这样我就可以看到它一开始就存在了*/
填充：0；
显示：表格；
位置：相对位置；
}
.quoteImage{
显示：表格单元格；
宽度：60%；
身高：100%；
背景颜色：珊瑚；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.quoteBlock{
显示：表格单元格；
宽度：40%；
身高：100%；
}
.引用{
位置：绝对位置；
排名：0；
右：0；
宽度：40%；
页边距：50px；/*我怎样才能得到。请务必在底部附上并包含此页边距*/
背景色：#fff；
填充：50px；
边框：1px实心番茄；/*这样我就可以看到边缘了*/
}
.报价p{
保证金：0；
文本对齐：居中；
字体大小：1.5rem；
线高：140%；
颜色：#B58f61；
}
@介质（最大宽度：600px）{
.引用{
位置：绝对位置；
排名：0；
右：0；
宽度：40%；
页边距：25px；/*我怎样才能得到。请始终将此页边距括在底部*/
背景色：#fff；
填充：25px；
边框：1px实心番茄；/*这样我就可以看到边缘了*/
}    
.报价p{
保证金：0；
文本对齐：居中；
字号：1rem；
线高：100%；
颜色：#B58f61；
}
}

这将是动态生成的任意长度的引用文本。Lorem ipsum door sit amet，concetetur adipsicing elit.Nullam euismod ipsum