砌體div高度= 0，但應調整爲搜索結果

我的內容div的高度爲0，但我希望它動態調整到它的孩子 - 這是絕對位置。我嘗試使用石匠作爲顯示搜索結果的方式，所以有時內容div看起來像這樣：http://i.imgur.com/UPLtrIc.jpg和其他時間像這樣：http://i.imgur.com/5X0qaaD.jpg。這怎麼能實現？砌體div高度= 0，但應調整爲搜索結果

我試着使用：

var biggestHeight = "0"; 
$("#content *").each(function(){ 
    if ($(this).height() > biggestHeight) { 
    biggestHeight = $(this).height(); 
    } 
}); 

$("#content").height(biggestHeight);

，但沒有奏效。

感謝提前:)

CSS

#wrapper > main > #content{ 
max-width: 960px; 
height: auto; 
margin: 0 auto; 
position: relative; 
} 

#wrapper > main > #content > article{ 
position: absolute; 
width: 32%; 
}

function renderGrid(){ 

var blocks = document.getElementById("content").children; 
var pad = 20, cols = 3, newleft, newtop; 
for(var i = 1; i < blocks.length; i++){ 
    if(i % cols == 0){ 
     newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad; 
     blocks[i].style.top = newtop+"px"; 
     console.log(); 
    }else{ 
     if(blocks[i-cols]){ 
      newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad; 
      blocks[i].style.top = newtop+"px"; 
     } 
     newleft = (blocks[i-1].offsetLeft + blocks [i-1].offsetWidth) + pad; 
     blocks[i].style.left = newleft+"px"; 
    } 
} 
} 

window.addEventListener("load", renderGrid, false); 
window.addEventListener("resize", renderGrid, false);

來源

2016-09-27 Patrick L. Çakırlı

對於初學者來說，你可以嘗試在內容DIV overflow: auto，但我認爲這是無論如何，默認值。

很高興看到你的html。

如果你想要的內容的div是全高所有的時間（好像這將是一個很好的解決方案），你可以使用類似

#wrapper > main > #content{ 
    height: 90vh; 
}

這意味着視口的90％（可見部分在你的瀏覽器中）高度，並將搜索欄設置爲其餘（本例爲10％）。

請注意，雖然瀏覽器與該版本的兼容性不會太遠。

考慮一下你是否真的想用這個函數和絕對值來定位你的項目。它根本沒有反應。你如何計劃接近移動設備？

你想要的是css grid或使用彈性盒。我建議後者。它的瀏覽器兼容性已經相當不錯了，flex box真的可以解決所有的設計問題。它很容易使用和超級響應。

這是一個很好的資源Solved by FlexBox

來源

2016-09-27 17:36:28 JHolub

砌體div高度= 0，但應調整爲搜索結果

回答

相關問題