内容框不响应子砌体内容高度.小提琴包括

Question

现在我正在努力让我的#contentdiv响应我的位置:absolute articles的高度。我尝试了多种方法，但都失败了。我知道我需要一些JS来计算高度。我还做了一个小提琴，你可以看到#contentdiv没有对文章做出反应。

jsfiddle

HTML

<div id="wrapper">         
    <div id="content">
        <article></article>
    </div>
</div>

CSS

#wrapper{
   background-color: #f5f5f5;
   height: auto;
   position: relative;
}                                                       
#content{
   max-width: 960px;
   margin: 0 auto;
   height: auto;
   position: relative;
}
article{
   background: #fff;
   position: absolute;
   width: 32%;
}

JS

window.addEventListener("load", renderGrid, false); 
window.addEventListener("resize", renderGrid, false);
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";
    }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";
    }
}
}

我希望你们中的一个能帮助我:)

Answer 1

是的，因为高度内容div是0:)如果你得到文档高度?

$(document).height();