在div高度不確定的情況下擴展div高度

我試圖在div沒有固定高度的情況下擴展div的高度。我必須這樣做，而不使用position:absolute，因爲擴展div需要與其他div進行交互。在div高度不確定的情況下擴展div高度

擴展DIV不能有一個固定的高度也不是在div ...

有沒有辦法做到這一點在CSS中，而無需使用JS？

更新：

爲了澄清，在這個例子中，我試圖從頂部延伸.extend div的高度與.main DIV的底部。 .extend不應該有固定的高度，也不應該位於absolute，因爲它需要推送圍繞它的元素。爲了讓事情變得更加複雜，divs適用於流動站點，所以除.extend div以外的所有內容必須具有100％的寬度。

如果您指定.extend的高度，您將看到我正在嘗試實現的目標，但需要在未指定高度的情況下執行此操作。

來源

2013-07-11 CyberJunkie

這裏有什麼你的目標？從示例/代碼中不太清楚 – CodingIntrigue

你有兩個彼此相鄰的div ...你是否要超越？ – Brewal

你能多解釋一下嗎？ –

其實你可以做一個簡單的黑客一樣，

.container { 
    display:table-row; 
} 
.extended { 
    display: table-cell; 
    background: green; 
    width: 150px; 
} 
.main { 
    display:table-cell; 
}

DEMO

希望這有助於

來源

2013-07-11 16:33:53

我猜你.wrapper正在採取100％的寬度或瀏覽器screen.and .main或.extend爲您創造問題，幷包含在.container.so這就是爲什麼我編輯.container below.if IYS讓你的容器像下面

.container{ 
    overflow:hidden;//very importantant to fulfill your criteria 
    width:500px;//i gues you want have a fixed width of your container 
    margin:3px;//if you want to 
    word-break:break-all;//if you use fixed width for your container,because you are writing text with width 100% inside the container 

}

編輯：根據您的編輯，如果你想下面add.extend。主要在你的div會

<div class="container"> 
    <div class="main"></dive> 
    <div class="extended">&nbsp;</div> 
</div>

現在你的CSS應該是：

.main { 
    width: 100%; 
    //doont use height it will take automatic height 
} 
.extended { 
    background: green; 
    width: 150px; 
    float: left; 
    height: 100%; 
    margin-top:40px;//create distance from main here,its better option 
}

來源

2013-07-11 13:07:49

我認爲你正在試圖使兩列相同的高度。看看這裏HTML/CSS: Making two floating divs the same height的一些建議。這個問題在這裏解釋http://alistapart.com/article/fauxcolumns

來源

2013-07-11 13:08:10

在div高度不確定的情況下擴展div高度

回答

相關問題