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

我有两个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的两种方法，以及一种使用脚本来实现此目的的方法：

1. 本文在没有CSS hacks的情况下实现了相同的列高度。

2. 这是一种使用CSS hack获得相等列高的方法 。

3. 最后，如果你想使用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用于交互式function。 HTML代表内容。 CSS用于设计。 你可以使用一个用于另一个目的，但仅仅因为你可以做某事并不意味着你应该。

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

以下是显示如何执行此操作的众多网页之一：

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

但是，即使它有效，也可以使用Javascript来解决那种演示问题。

Answer 4

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

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

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

2. 然后你可以使用jQuery获取侧边栏并使用变量分配内容高度。

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

它是如此简单。 最终的代码将如下所示。

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

这是更多的例子。 使用jquery设置di​​v高度（拉伸div高度）。

Answer 5

我想你要找的是人造柱 。

Answer 6

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

  
 
 hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
hellow i am floating as absolute 
  

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