Question

你可以让两个div在没有

的情况下具有相同的高度

1）保证金黑客，因为那时我没有边框：

margin-bottom : -500px;
padding-bottom : 500px;

2）Javascript，因为页面上有非缓存用户的闪烁。

3）固定高度，因为我无法动态添加更多内容。

这个页面http://www.stdicon.com/适用于中间的两个div（目前用JS编写，但我更喜欢纯CSS解决方案）

Answer 1

假设您不关心流动性/缩放，请采用粉红色和浅橙色最顶部的1像素高水平屏幕截图，并使其成为两个部门后面的垂直重复背景。

Answer 2

也许Faux Columns方法可以解决您的问题：

Faux Columns

Answer 3

使用嵌套在相对定位的包装器中的绝对定位的div，使用以下步骤创建相等的高度列：

使用inline-block
围绕所有列创建包装器div并将其设置为相对定位
将绝对定位的div放置在包装器div中的最后一个元素
将绝对定位的div设置为{bottom：0;身高：100％; z-index：-1; }
将绝对定位的div的宽度设置为等于第一列的宽度
设置绝对定位div的左偏移量，使其与第一列重叠
设置绝对定位div的所需边框和背景颜色
如有必要，对剩余的列重复此步骤

以下是一个例子：

<!doctype html>
<html>
<head>
  <title>Equal Height Columns</title>
  <meta charset="utf-8">
  <style>
  /* Wrapper */
  .wrapper { position: relative; }
  /* Column */
  .column { display: inline-block; vertical-align: top; }
  /* Layered Illusion */
  .equalizer { position: absolute; bottom:0; left: 0; height: 100%; z-index: -1; }
  /* Border for Column and Illusion */
  .equalizer, .column { border: 1px solid red; border-width: 0 1px; width: 200px; }
  </style>
</head>
<body>
  <div class="wrapper">
    <div id="first" class="column">
      <span>hello</span>
    </div>
    <div class="column">
      <div>
        <p>hi</p>
        <p>there</p>
      </div>
    </div>
    <div class="column">
      <span>there</span>
    </div>

    <div class="equalizer"></div>
  </div>
</body>
</html>

CSS：相等的高度div没有边距黑客

3 个答案: