1

你能让两个 div 有相同的高度吗

1）margin hacks，因为那时我不能有边框：

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

2) Javascript，因为非缓存用户的页面会闪烁。

3) 固定高度，因为这样我就不能动态添加更多内容。

这是这个页面http://www.stdicon.com/中间的两个 div（目前在 JS 中调整大小，但我更喜欢纯 CSS 解决方案）

4

3 回答 3

1

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

于 2009-09-26T05:43:39.830 回答
1

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

仿列

于 2009-09-26T07:09:33.933 回答
0

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

  • 使用 inline-block 创建列
  • 在所有列周围创建一个包装器 div 并将其设置为相对定位
  • 将绝对定位的 div 作为包装器 div 内的最后一个元素
  • 将绝对定位的 div 设置为 { bottom:0; 高度：100%；z 指数：-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>
于 2012-06-21T18:41:49.233 回答