使一个子div与父div一样高,没有position:absolute

时间:2013-10-29 13:43:53

标签: css html css-position parent-child

以下是代码:

 <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设置为绝对而不破坏屏幕上的自动修复以重新调整大小。

3 个答案:

答案 0 :(得分:2)

我将以下代码添加到your example

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

padding-bottom: 1000px在每个列的底部添加1000px的填充。

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

通过提供#content overflow:hidden,您无法在每列的底部看到额外的1000px,因此列似乎具有相同的高度(尝试删除overflow:hidden)以查看他们仍然不同。

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

工作示例:http://jsfiddle.net/R8gH9/3/

答案 1 :(得分:2)

它不起作用的原因是因为父级没有定义的高度。百分比值基于父级的显式高度(或宽度),如果让它自由流动,为什么没有任何反应。

通常,在使用这样的基于列的布局时,您可以使用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>

答案 2 :(得分:0)

将其设置为“position:relative;”要么 “position:absolute; display:block;”