CSS：高度相等的div了无空白黑客

1）保证金黑客，因为这样我可以没有边框：

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

2）投票，因为这样非缓存用户的页面闪烁。

3）固定高度，因为那时我不能动态地添加更多的内容。

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

来源

2009-09-26 Paul Tarjan

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

来源

2009-09-26 05:43:39

也许人造列的方法可以解决你的问题：

Faux Columns

来源

2009-09-26 07:09:33 Jaxwood

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

创建使用内联块
列创建的所有列周围的包装的div并将其设置为可相对定位
发布绝对定位的div作为包装DIV中的最后一个元素
设置绝对定位的div到{底部：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>

来源

2012-06-21 18:41:49

CSS：高度相等的div了无空白黑客

回答

相关问题