Question

我有两个DIV，.sidebar和.content，我想将.sidebar设置为与.content保持相同的高度。

我尝试了以下内容：

$(".sidebar").css({'height':($(".content").height()+'px'});

$(".sidebar").height($(".content").height());

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

这些都不起作用。对于.content我没有任何高度，因为会根据内容增加或减少。

请帮帮我。我今天必须完成一个网页，这个（简单）的事情让我很头疼。

谢谢！

Answer 1

你的第一个例子不起作用的原因是因为拼写错误：

$(".sidebar").css({'height':($(".content").height()+'px'});

实际应该是

$(".sidebar").css({'height':($(".content").height()+'px')});

你在.content选择器之前缺少一个尾随括号。

Answer 2

eje211有一个关于使用CSS来设置页面样式的观点。以下是使用CSS的两种方法，以及一种使用脚本来实现此目的的方法：

本文使列高度相等without CSS hacks。
以下是获得相等列高using a CSS hack的方法。

最后，如果你想使用javascript / jQuery，你可以使用jQuery .map()页面的均衡高度脚本作为演示。

$.fn.equalizeHeights = function(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}

然后按如下方式使用它：

$('.sidebar, .content').equalizeHeights();

Answer 3

根据我的经验，使用Javascript进行此类操作是一个非常非常糟糕的主意。网络应该是语义的。它并不总是，但它应该。 Javascript用于交互式功能。 HTML代表内容。 CSS用于设计。你可以使用一个用于另一个目的，但仅仅因为你可以做某事并不意味着你应该。

至于你的具体问题，简短的回答是：你没有伸展侧边栏。你不必。您设置了一个看起来像侧边栏的背景，让它看起来像一个列。就像Victor Welling所说的那样，它是一个虚拟的柱子。

以下是展示如何操作的众多网页之一：

http://www.alistapart.com/articles/fauxcolumns/

但是，即使它有效，也可以将它用于Javascript，因为那种演示问题会“错误”。

Answer 4

我使用此技术根据另一个元素的高度强制页脚元素保留在页面底部。在你的情况下，你会;获取侧边栏和内容div以保持相同的高度可以执行以下操作。

获得主div的高度;我猜这是.content div;并将其分配给变量。

var setHeight = $(".content").height();
然后你可以使用jQuery获取侧边栏并使用变量分配内容高度。

$(".sidebar").height(setHeight);

就这么简单。最终的代码将如下所示。

`var setHeight = $(".content").height();`
`$(".sidebar").height(setHeight);`

Here are more examples.使用jquery（拉伸div高度）设置div高度。

Answer 5

$(window).resize(function(){
   var height = $('.child').height();
   $('.parent').height(height);
})

$(window).resize(); //on page load

.parent{
  background:#ccc;
  display:inline-block;
  width:100%;
  min-height:100px;
}
.child{
  background:red;
  width:50%;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute
  </div>
</div>

Answer 6

我认为你要找的是faux columns。

Answer 7

像魅力一样：

function sidebarHandler() {
  jQuery(".sidebar").css({'height':(jQuery(".content").height()+'px')});
  jQuery(".sidebar").height(jQuery(".content").height());
  var highestCol = Math.max(jQuery('.sidebar').height(),jQuery('.content').height());
  jQuery('.sidebar').height(highestCol);
}

使用所有其他jQuery内容初始化它：

jQuery(document).ready(function() { 
  sidebarHandler();
});

将DIV高度设置为等于另一个DIV

7 个答案: