Question

目的

根据推入容器的动态数据，让页面在我的网站上扩展。

背景

该页面包含一组通过JSON Feed填充的图像和文本。文本溢出到页脚中，因为它没有扩展其包含的div，随后会扩展其包含的div，随后会扩展主体。所以我需要一个特定的子div来推送它的多个父div。

我在Stackoverflow上搜索过类似的问题并尝试了各种CSS解决方案，例如为所有父div提供clear:both的CSS规则，甚至在插入<div style="clear:both"></div>的HTML中，但这些解决方案都没有工作

所以现在我正在尝试使用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 &amp; 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可能使用不同的结构？

Answer 1

不是一个完整的修复，但也许有帮助。

我已经使用过这个功能，但是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

使用jQuery如何让所有父div和body扩展到适应内容？

目的

背景

1 个答案: