擴展高度以包含絕對定位的兒童

我正在爲CMS構建一個html/javascript主題設計器。元素絕對定位，可以通過鼠標移動/調整大小，和/或包含可編輯文本，其高度可以由行數決定。然而，我遇到了一個問題，即父元素的高度不能擴展到包含絕對定位的子元素。擴展高度以包含絕對定位的兒童

最少的代碼（也JSFiddle here）：

<style> 
    div.layer { position: absolute } 
    div.layer1 { width: 400px; border: 1px solid #ccc } 
    div.layer2 { top: 15px; left: 100px; width: 100px; border: 1px solid blue } 
</style> 
<div class="layer layer1">container should expand to the bottom of the child. 
    <div class="layer layer2" contentEditable>Child with<br/>editable text.</div> 
</div>

只有A CSS的解決方案是理想的，我不擔心舊的瀏覽器。但我主要是在尋找任何方法來防止在每個頁面上使用創建的主題來設置其高度（因爲具有相同主題的頁面可能具有不同數量的文本）而需要運行javascript。

已經有一些類似的問題，但他們接受的答案（例如，不使用絕對定位）在我的情況下不起作用。除非有一種方法可以在沒有位置的情況下擁有多個可拖動/可調整大小的元素：absolute。

來源

2013-09-22 Dwayne

我不知道，但不認爲這可以通過使用純CSS來完成。 –

我找到了一個純CSS的解決方案！總結：

將子元素設置爲position：relative而不是absolute。
將它們的邊距右移設置爲它們的負寬度，使它們的有效寬度爲零，並將它們設置爲浮動：將它們全部保持在同一行上。這使得它們都具有0,0的原點。
然後，我們可以設置它們的左邊界和邊界頂點屬性，以將它們完全放置在其父代中。請注意，margin-top是必需的，而不是top，因爲top不會下推父元素的底部。

JSFiddle here或下面的代碼：

<style> 
    div.layer { position: relative; float: left; } 
    div.layer1 { width: 400px; border: 1px solid black } 
    div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue } 
    div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red } 
    div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green } 
</style> 
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;"> 
    Container 
    <div class="layer layer2" contentEditable>Edit me</div> 
    <div class="layer layer3"> 
     <div class="layer layer4" contentEditable>Edit me</div> 
    </div> 
</div>

來源

2013-09-23 15:29:04 Dwayne

這實際上是輝煌的。榮譽。 +2 MySpace讚美你（或+1的SO點）。 – indextwo

絕對定位的元素從流去除，從而被其他元素

你唯一的辦法就是孩子的位置設置爲位置忽略：相對，這樣就可以使用右側，左側，頂部和底部移動它，改變它的父顯示器顯示：inline-block的

來源

2013-09-22 19:44:34 Drupalist

感謝您的想法，但不幸的是，當有多個孩子時失敗。第二個孩子的位置與第一個孩子的位置偏離，這是位置的相關行爲：相對。 – Dwayne

如果你想保持絕對定位的孩子，你可以使用下面的腳本來調整容器：http://jsfiddle.net/6csrV/7/

var layer1 = document.getElementsByClassName('layer1'), 
    i = 0, len = layer1.length, childHeight; 
for(; i < len; i++) { 
    childHeight = layer1[i].getElementsByClassName('layer')[0].clientHeight; 
    layer1[i].style.height = childHeight + 'px'; 
} 
document.addEventListener('keyup', function(e) { 
    if(e.target.className.indexOf('layer2') !== false) { 
     e.target.parentNode.style.height = e.target.clientHeight + 'px'; 
    } 
});

來源

2013-09-22 19:51:19 user2804989

如果我找不到更好的東西，我會使用類似於此的解決方案。但是，當有數十個以各種方式嵌套的元素時，它變得更加複雜。這和我不喜歡在頁面加載運行JavaScript來修復佈局。 – Dwayne

擴展高度以包含絕對定位的兒童

回答

相關問題