14

我使用引导程序作为我的 CSS 框架。现在我在左侧 div 中有一些动态内容，在右侧 div 中有一些静态内容。我想根据左侧 div 的高度自动更改右侧 div 的高度。那可能吗？

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5 offset1">
    <div class="well">
      Dynamic Content
    </div>
  </div>
  <div class="span5">
    <div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
      Static Content
    </div>
  </div>
</div>

4

4 回答 4

8

你可以这样做

<div class="wrapper">
    <div class="dynamic">
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
    </div>
    <div class="static">
        Static<br />
        Static<br />        
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 400px;
    overflow: auto;
}

.dynamic {
    position: relative;
    background-color: yellow;
    width: 200px;
}

.static {
    position: absolute;    
    background-color: orange;
    width: 200px;
    float: left;
    left: 200px;
    top: 0px;
    bottom: 0px;
    right: 0px;
}
于 2013-09-22T05:27:23.907 回答
6

我认为 jQuery 是实现这一目标的最佳解决方案。看看我的小提琴：

http://jsfiddle.net/PHjtJ/

$(document).ready(function() {

    var dynamic = $('.dynamic');
    var static = $('.static');

    static.height(dynamic.height());

});
于 2013-09-22T15:19:08.273 回答
2

static在列大于列的情况下，解决方案取决于您想要的行为dynamic。[我实际上认为你想要第二种情况。]

注意：这两种情况都是纯 CSS，并且没有指定任何高度。此外，不指定任何类型的边距，因此您可以随意更改列的宽度，而无需一次又一次地计算边距/位置..

  1. 如果您希望动态列放大，并作为静态高度：所以您实际上希望列始终具有相同的高度。这可以通过 CSS 表格布局样式轻松实现。在这种情况下：见这个小提琴（脚本仅用于添加动态内容，这是一个纯 CSS 解决方案）

  2. 如果您希望动态列仅拉伸到其内容高度，而静态列具有相同的高度+滚动条。在这种情况下：看到这个小提琴（再次：脚本仅用于添加动态内容，这是一个纯 CSS 解决方案）

在这两种情况下，如果动态列变长，静态列就会增长。

于 2013-09-22T10:39:29.833 回答
2

使用 Javascript/jQuery 查找哪个框的高度最大。然后为所有 div 设置相同的高度。

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var description = jQuery("div.description");
        var big =0;
        description.each(function(index, el) {
            if(jQuery(el).height() > big)
                big =jQuery(el).height(); //find the largest height
        });

        description.each(function(index, el) {
            jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
        });
    });
</script>
于 2014-12-04T06:53:20.410 回答