自动使两个块高度相同

Question

我有两个块，第一个是我将显示我的帖子的块，第二个是侧边栏，只有背景。我想让侧边栏高度等于内容栏，例如我在 Css:

中通过静态方式分配它

#sidebar {
    heght: 565px;
}

，但是如果我想输出更高的帖子数怎么办，我可以使侧边栏的高度以某种方式依赖于内容栏的高度吗？谢谢！

它可能与 here 重复，但答案中描述的方法对我没有帮助。

Answer 1

一种方法是使用您发布的 link 中提到的 table 显示解决方案，但您也可以使用 flexbox 方法，它是 CSS3 属性已被 almost 93% of browsers 支持（如果需要，您可以使用 JS 回退）。

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container_item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

More details about this solution

有关的完整指南弹性盒子

Answer 2

我解决了类似的问题，并提出了一个 jQuery 解决方案，您可能想尝试一下，它对我来说效果很好。

基本上，该函数获取主要内容和侧边栏的高度。如果主要内容大于侧边栏，则将侧边栏的高度设置为主要内容的高度。

$(document).ready(function () {
   var postheight = $("#yourmaincontent").height();
   var opinfoheight = $("#yoursidebar").height();
   if (postheight >= opinfoheight) {    
       $("#yoursidebar").css("height",""+ postheight +"px");
    }
   else {       
   }
 });

可能有一种方法可以在纯 CSS 中完成，但我没有找到。

Answer 3

当您在内容上使用特定的 height 并在侧边栏上使用 height:100%; 时，无论何时更改内容，侧边栏都会随内容一起移动。

JsFiddle

自动使两个块高度相同

Make two blocks identical height automatically

html

css

height