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

我有两个DIV，.sidebar和.content，我想设置.sidebar与.content保持相同的高度。设置一个DIV高度等于另一个DIV

我已经试过如下：

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

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

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

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

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

谢谢！

来源

2010-07-18 George

你有页脚？如果你这样做了，也许你可以在它上面声明'clear：both;'然后你的边栏和内容会有相同的高度。但这取决于您的布局以及您是否在悬浮边栏。 – melhosseiny 2010-07-18 14:25:33

我认为你要找的是faux columns。

来源

2010-07-18 14:29:30

根据我的经验，对于这类事情使用Javascript是一个非常非常糟糕的主意。网络应该是语义的。它并不总是，但它应该。 Javascript是用于交互功能的。 HTML是用于内容的。 CSS是用于设计的。你可以使用其中一个用于其他目的，但仅仅因为你可以做某件事并不意味着你应该。

至于你的问题具体，简短的答案是：你不伸展侧边栏。你不需要。你设置了一个看起来像你的侧边栏的背景，让它看起来像一个列。正如维克多威灵所说的那样，它是一个仿真专栏。

这里有很多网页上显示如何做到这一点之一：

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

但它采用JavaScript的那种呈现问题的将是“错误的”，即使它的工作。

来源

2010-07-18 14:32:12 eje211

我知道这个方法，但是如果你已经应用了另一个背景，那么你仍然需要使用jQuery呢？ – George 2010-07-18 14:44:10

还有什么其他背景？你能给个例子吗。你不应该*需要*为此使用jQuery。在Victor和我链接的页面上的例子中，有一个像两列一样的背景。很可能，您的边栏位于容器中。容器应该看起来像你的侧边栏。或者，您可以将容器翻倍，并将侧边栏的背景设置在最里面的容器中，并使用侧边栏的宽度。另一种处理方式是使用免费模板并对其进行修改。如果你观察模板如何完成它的工作，并且模板很好，你可能会学到很多东西。 – eje211 2010-07-18 15:07:14

我同意eje211，但我有乔治相同的问题。我正在处理的网站上有一个关于身体的背景图片和一个侧栏。身体的背景不重复，而是一个大的图像，以适应页面。我无法在后台添加“虚拟列”，因为拉伸会搅乱边栏。因此，我不得不使用jQuery。 – 2014-04-16 21:48:31

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

来源

2010-07-18 15:04:40 Mottie

你的第一个例子是不工作的原因是由于输入错误的：

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

实际上应该是

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

您错过了.content选择器之前的尾部支架。

来源

2012-02-02 14:04:23 Allerion

我使用这种技术来强制页脚元素保留在基于另一元素高度的页面底部。在你的情况下，你会的;获得边栏和内容div保持相同的高度可以做到以下几点。

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

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

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

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

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

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

来源

2013-04-09 14:56:03

就像一个魅力：

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

来源

2013-07-14 18:40:49

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

来源

2017-11-02 08:23:08 Tahir

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

回答

相关问题