2016-09-30 4 views
0

今、私は#content divが自分のポジションの高さに対応するように苦労しています:絶対記事。私は複数の方法を試みましたが、すべて失敗しました。私は高さを計算するためにJSが必要であることを知っています。私もフィドルを作りました。あなたが見ることができるように、#content divは記事に反応しません。コンテンツボックスは、子の石積みコンテンツの高さに応答しません。 fiddle incl

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"; 
    } 
} 
} 

私はあなたのいずれかが私を助けることができると思います:)

+0

#content divにはどのような反応が期待できますか?私は理解していない、すべてが私には大丈夫です。私は3 x 3グリッドを見る。私は内容を入れて正しく滞在します。 –

+0

私の#content divの高さは、高さ0を示しています。 –

答えて

0

はい、高さのコンテンツdivが0であるため:)とドキュメントの高さを取得する場合は?

$(document).height(); 
関連する問題