CSS採取絕對定位的孩子的高度

我有一個容器設置爲max-width:780px和身高未申報。在容器內部，有一個圖像幻燈片。頁面上的所有內容都是響應式的，所以隨着寬度的減小，圖像（寬度設置爲100％）調整高度容器。CSS採取絕對定位的孩子的高度

幻燈片變化的圖像，以display:static;和position:absolute;因爲它不被視爲容器

的內容不再「保持開放」容器是否有任何創造性的解決方案在那裏拿孩子元素的高度這是絕對定位？

下面的例子沒有在主容器上聲明高度..沒有東西把它打開。 http://dhut.ch/test/santos/

謝謝！

2011-07-30 technopeasant

決定使用jQuery來處理它。見下面的問題。 http://stackoverflow.com/questions/6882019/using-jquery-to-adjust-a-parent-elements-height-to-match-its-visible-childs-he – technopeasant

刪除絕對位置。我會避免內聯樣式。

來源

2011-07-30 07:43:19 ngen

我聽到你，這是一個痛苦屁股。內聯樣式由jquery幻燈片生成，因此無法避免它。 – technopeasant

我認爲你最好改變你的方法。對於滑塊，最佳做法是使容器的子元素浮動，並使用其中一種已知技術來防止父級的崩潰。所以，我建議你從圖片中刪除position: absolute CSS規則，並把它們飄浮您<div id='main'>內，然後使用上述任何一種方法來迫使它包括它的孩子們：

div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
添加<div style='clear: both;'>到您的主div容器的末尾。

來源

2011-07-30 07:54:34

Naemati - 我很樂意將它們浮起來......但爲了讓它們漸漸變成另一個，它們需要完全置於彼此之上。 – technopeasant

圖像是否都是相同的尺寸？如果是，則可以在包含圖像的元素上使用百分比padding-top。

所以，如果你的圖片都是，比如說760px寬x 500像素高，這是760分之500= 0.65789

這是個會轉化爲類似：

#main { 
    position: relative; 
    max-width: 760px; 
    padding-top: 65.789%; 
}

的原因，這作品是因爲使用padding（如果它設置了百分比），則將其計算爲寬度爲的百分比。隨着元素寬度縮小，高度將按比例縮小，並且框將保持相同的寬度與高度的比例。絕對定位的圖像不會被添加到盒子的高度。

只要您的圖像具有相同的寬高比，並且您不希望該比例發生變化，就會生效。如果你會使用大量的隨機圖片，這不適合你。

來源

2011-08-10 19:29:38 unexplainedBacn

太棒了，真是個好主意！感謝你！ – DanC

我最近有一個類似的問題，我需要一個圖像，以絕對位置在Zurb基金會模板頁面的頂部，以便將其拉出流程並重置其尺寸（圖像必須伸展到包裝的邊緣，而是由其父代.row填充）。但是，當然，這意味着它下面的所有流體響應元件都會直接從圖像頂部彈出。設置邊緣頂部或將兄弟元素放置在下方意味着不會隨瀏覽器寬度調整大小的剛性頂部空間。

爲了解決這個問題，我在絕對定位的圖像後面放置了一個圖像副本，並將其設置爲visibility: hidden;我不得不添加一點額外的底邊以彌補高度差異，但最終結果就是頁面上的所有內容都正好流向正在使用的圖像的高度。

我也使用了上面說明的unfplainedBacn的填充技巧，這也是一個很棒的技巧。這需要一點數學，但我投了這個答案。好的解決方案

來源

2013-06-20 17:55:09

對於在絕對定位的圖像之後放置複製圖像的位+1。一直在尋找這個容器高度的工作，絕對定位元素quandry了一段時間，這工作的一種享受！謝謝 –

正是我尋找的解決方案！ –

@GraySpectrum真的嗎？我認爲unexplainedBacn的解決方案比我的解決方案更好 - 確保嘗試填充解決方案，因爲它不會將HTML寫入頁面，而且非常優雅。並按比例調整大小。 –

CSS採取絕對定位的孩子的高度

回答

相關問題