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

Posted 2023-03-05

【中文标题】设置一个 DIV 高度等于另一个 DIV

【英文标题】：Set a DIV height equal with of another DIV

【发布时间】：2011-03-17 14:14:03

【问题描述】：

我有两个 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，我没有任何高度，因为会根据内容增加或减少。

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

谢谢！

【问题讨论】：

你有页脚吗？如果你这样做了，也许你可以在上面声明clear: both;，然后你的侧边栏和内容将具有相同的高度。但这取决于您的布局以及您是否浮动侧边栏。

【参考方案1】：

我想你要找的是faux columns。

【参考方案2】：

根据我的经验，在这类事情上使用 javascript 是一个非常非常糟糕的主意。网络应该是语义的。并非总是如此，但应该如此。 Javascript 用于交互功能。 html 用于内容。 CSS 用于设计。您可以将一个用于另一个目的，但仅仅因为您可以做某事并不意味着您应该这样做。

至于您的具体问题，简短的回答是：您不会拉伸侧边栏。你不必。您设置了一个看起来像侧边栏的背景，并让它看起来像一列。正如 Victor Welling 所说，它是一个假柱子。

这里是展示如何做到这一点的众多网页之一：

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

但是，即使可行，使用 Javascript 来解决这种演示问题也是“错误的”。

【讨论】：

这个方法我知道，但是如果你已经申请了其他背景，还需要使用jQuery呢？

还有什么背景？能给我举个例子吗。你不应该需要为此使用jQuery。在 Victor 和我链接到的页面上的示例中，有一个背景看起来像两列。您的侧边栏很可能在一个容器中。容器应该看起来像您的侧边栏。或者您可以将容器加倍并将侧边栏的背景设置在最里面的容器中，并使用侧边栏的宽度。另一种处理方式是使用免费模板并对其进行修改。如果您观察模板的工作方式，并且模板做得很好，您可能会学到很多东西。

我同意 eje211，但我和 George 有同样的问题。我正在处理的网站在正文和侧边栏上有一个背景图像。正文背景不重复，而是一张大图像，可以拉伸以适应页面。我无法在背景中添加“人造列”，因为拉伸会弄乱侧边栏。因此，我不得不使用 jQuery。

【参考方案3】：

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

【参考方案4】：

您的第一个示例无法正常工作的原因是因为拼写错误：

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

应该是

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

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

【参考方案5】：

我使用此技术根据另一个元素的高度强制页脚元素保留在页面底部。在你的情况下，你会；让侧边栏和内容 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 高度）。

【参考方案6】：

像魅力一样工作：

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

【参考方案7】：

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