讓孩子-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如父格相同的高度沒有位置：絕對

回答

相關問題