父格擴展到兒童的div

我要的div：父格擴展到兒童的div

<div id="outerContent"> 
    <div id="innerContent"> 
    </div> 
</div>

innerContents的立場是絕對的（我需要它的方式對JavaScript動畫）。如何將outerContent擴展爲innerContents的高度，就好像innerContent不會被設置爲position：absolute一樣？

來源

2011-03-30 donkapone

你確定你不能使用'position：relative'嗎？ – zzzzBov 2011-03-30 16:59:09

兩件事情：

1）你應該能夠在innerdiv滑走，而不需要position:absolute;，position:relative;應該足夠了。它的優點是仍然被認爲是在渲染流程中，正如aveic所稱的那樣。

見my jsfiddle example

2）如果你想使用absolute，可以確保它僅與JS啓用它，因爲你正在使用JS反正進行動畫擰不任何東西。所以在JS中，只需要說$('#innerDiv').css({position: absolute});，而且你仍然不會放棄沒有啓用JS的人。

來源

2011-03-30 20:27:45 JakobTischler

設置位置：絕對從文檔的渲染流程中移除元素的渲染。所以父元素對內部元素一無所知。

您可以使用javascript來同步它們的寬度。那樣：

$('#outerContent').width($('#innerContent').width());

和高度一樣。

還有其他選擇。

<div id="outerContent"> 
    <div id="innerContent"></div> 
    <div id="innerContentDouble" style="visibility:hidden"></div> 
</div>

innerContentDouble應該與innerContent具有相同的內容，但它不應該是position：absolute。所以父母的div將會擴展，但「visibility：hidden」的「doubled」div的內容將不會顯示。但它不是一個非常好的做法:)

來源

2011-03-30 16:55:48 aveic

+1。請注意，第二種方法遠非完美，因爲當「重複」div放置在文檔流的「正常」位置時，與絕對定位時相比，它的大小可能不同。 – melkamo 2011-03-30 17:07:05

你們忘了提及 – aveic 2011-03-30 17:09:10

這個javascript對我不起作用，因爲我希望網站在javascript關閉的情況下降級得很漂亮。我不想用第二種方法 - 就像你說的那樣：這不是一個好習慣。我實際上想要實現的是將div動畫化，然後在屏幕上向左滑動，然後在jQuery放入一些新內容之後，再次從屏幕右側滑入。從我讀過的 - 只有當div完全定位時才能實現。任何其他想法？ – donkapone 2011-03-30 19:41:15

父格擴展到兒童的div

回答

相關問題