让孩子-DIV如父格相同的高度没有位置：绝对

这里是代码：让孩子-DIV如父格相同的高度没有位置：绝对

<div id="content" class="row shadow" > 

    <div id="test2" class="col-lg-4"> 
     <p>dsfdsfasdfdasfdsafdsfasdf</p> 
    </div> 

    <div id="test3" class="col-lg-4" style=""> 
     <p>breerwwerewrqerewrqewqrwqer</p> 
    </div> 

    <div id="test4" class="col-lg-4"> 
     <h2>Directlinks</h2> 
     <p>BRRRRRRRRRRRRRRRRRRRRRRRRRRRR</p> 
    </div> 

</div>

..和我想设置：

border-right:1px solid #ddd;

中的ID＃TEST2和＃test3

问题是，该div不想从高度：100％从父div的固定到内容的高度。

如果我给一个测试*绝对位置，它需要父div的最大高度，但我不能将所有子div设置为绝对，而不会破坏屏幕的自动修复以重新调整大小。

来源

2013-10-29 David

所以，你想实现像[这]（http://jsfiddle.net/WU64s/）？ – darthmaim

没有，如[此]（http://jsfiddle.net/R8gH9/） >如果放大可以看到它们不具有相同的高度作为父的div – David

检查这一个边界线：http://jsfiddle.net/R8gH9/1/ – darthmaim

我下面的代码添加到your example：

@media (min-width: 1200px) { 
    #content { overflow: hidden; } 
    #test2, #test3, #test4 { 
     margin-bottom: -1000px; 
     padding-bottom: 1000px; 
    } 
}

的padding-bottom: 1000px增加了1000像素填充到每个列的底部。

margin-bottom: -1000px;基本上通过将每列的高度减少1000px来再次删除此填充。每列现在都有至少1000px的高度（填充+内容）。

通过给#contentoverflow:hidden你不能看到在每一列的底部的额外1000像素，所以列似乎都相等的高度（尝试删除overflow:hidden）看，他们仍然不同。

媒体查询（@media (min-width: 1200px)）确保只在您的列应彼此相邻显示时应用这些附加规则。

工作例如：http://jsfiddle.net/R8gH9/3/

来源

2013-10-29 14:53:16 darthmaim

这真的很聪明，但那里是不是优雅的艺术？并感谢您的解释！ – David

还有其他一些方法可以达到同样的效果，请查看此页面以获得总览：http://css-tricks.com/fluid-width-equal-height-columns/。但是我使用的方法是Bootstrap列实现中最简单的方法。 – darthmaim

比将其设置为“position：relative;”或 “position：absolute; display：block;”

来源

2013-10-29 13:49:04

“无位置：绝对”，因为这会破坏屏幕功能的自动修复。 – David

是啊只是位置相对和比子项目将使用其父母高度... –

我设置了#content位置：相对但子div不会采取他父母的高度 – David

它不工作的原因是因为家长没有规定的高度上。百分比值基于父级的显式高度（或宽度），为什么没有任何反应，如果你让它自由流动。

通常，在使用像这样的基于列的布局时，可以使用display：table和table-cell来实现您想要的效果。 I made a simple example to demonstrate this。

CSS：

.outer { 
    display: table; 
} 
.col { 
    display: table-cell; 
    border: 1px solid red; 
}

HTML：

<div class="outer"> 
    <div class="col"> 
     text<br/> 
     text<br/> 
     text<br/> 
    </div> 
    <div class="col"> 
     text 
    </div> 
    <div class="col"> 
     text<br/> 
     text<br/> 
    </div> 
</div>

来源

2013-10-29 15:19:46

让孩子-DIV如父格相同的高度没有位置：绝对

回答

相关问题