目标
根据推送到容器中的动态数据，让页面在我的网站上扩展高度。
背景
该页面包含一组图像和文本，这些图像和文本通过 JSON 提要填充。文本溢出到页脚中，因为它没有扩展其包含的 div，该 div 随后将扩展其包含的 div，而该 div 随后将扩展正文。所以我需要一个特定的子 div 来推送它的多个父 div。
我在 Stackoverflow 上搜索了类似的问题并尝试了各种 CSS 解决方案，例如为所有父 div 提供 clear:both 的 CSS 规则。甚至在 HTML 中插入 <div style="clear:both"></div>但这些解决方案均无效。
所以现在我正在尝试使用 jQuery 看看是否可以找到解决这个问题的方法。
我知道我需要创建一个像
这样的变量
var newHeight = $("#carousel").height();
而且它需要用类似的东西推高高度
$(".case").height(newHeight);
这是我当前的 HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
{{{description}}}在<p>溢出到其父 div <div class="description_container">然后<div class="case">然后<div id="carousel">然后<div class="casesContainer">然后<div class="large-12"> (这是 Foundation 中的一个容器)然后 <div class="mainContent">等等。
这是我的 CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
我意识到 #carousel { height:auto; min-height:600px; overflow-y: auto; }是一个丑陋的黑客。这只是一个实验。
我希望我只是完全遗漏了一些东西，这是一个简单的 jQuery 修复。或者我的 HTML 和 CSS 可以使用不同的结构？
最佳答案
不是一个完整的修复，但可能有帮助。
我使用过此功能，但 Internet Explore 会增加调整大小的高度。
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready
关于javascript - 使用 jQuery 如何使所有父 div 和 body 扩展高度以容纳内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20528586/