相対的なdiv内の絶対オーバーフローdivを押し下げる

私は、オーバーフローの場合にコンテンツをスクロールできるようにコンテンツdivに絶対配置があるCSSレイアウトを持っています。このコンテンツdivは、相対div内に配置されます。これは、上の要素の高さが異なる場合があるためです（内容によって決定される）。相対的なdiv内の絶対オーバーフローdivを押し下げる

私の解決策はChromeとIE9でのみ機能しますが、コンテンツ部門はFirefoxでスクロールバーを表示しません。残念ながら私の解決策は古いブラウザでは機能しません。あなたは上記の要件を達成するためのより良いレイアウトを知っていますか？

編集：私はおそらく（私が間違っている場合は、私を修正してください）テーブルを使用する必要がある理由

レイアウトビューポート、100％の幅と100％の高さを埋める必要があり、それはです。また、私はコンテンツを操作することができる他のjavascriptを持っているので、javascriptのないソリューションを好む。

私の現在のコード：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>Test</title> 
    <style type="text/css"> 
     html, body, form { width:100%; height:100%; margin:0; overflow:hidden; } 
    </style> 
</head> 
<body> 
    <table style="width: 100%; height: 100%;"> 
     <tr> 
      <td style="height: 120px; border: 1px solid #000;"> 
       Top: always same height 
      </td> 
     </tr> 
     <tr style="height: 20px; background-color: Red;"> 
      <td> 
       Variable height: could push the next row down 
      </td> 
     </tr> 
     <tr style="position: relative; overflow: auto;"> 
      <td style="position: relative; background-color: White; vertical-align: top; overflow: scroll;"> 
       <div style="position: relative;"> 
       <div style="position: absolute; bottom: 0; top: 0; left: 0; right: 0; "> 
       Content with variable height: needs overflow auto/scroll 
       </div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

出典

2011-07-20 Martin de Ruiter

あなたがスクロールする必要がある場合はなぜ 'オーバーフロー：隠された'？ – zneak

テーブルが本当に必要ですか？ – fromvega

オーバーフロー：私はページ全体ではなく、コンテンツdiv内のスクロールが必要なため、非表示になっています。私はテーブルが必要だと思います。なぜなら、ビューポート全体を埋める必要があるからです。それはこのシナリオでは動作しないようです（私が間違っていれば修正してください）。 –

私はCSSでそれを行う方法を見つけ出すことはできませんが、私はそれがJavaScriptで動作させることができます。（体内）

HTML：

<div id='top'> 
    top - fixed height 
</div> 
<div id='middle'> 
    middle - some content and stuff 
</div> 
<div id='bottom'> 
    bottom - this content should scroll<br/> 
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/> 
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/> 
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/> 
</div>

CSS：

body{ 
    margin:0; 
    padding:0; 
} 

#top{ 
    width:100%; 
    height:100px; 
    background:#ccf; 
} 

#middle{ 
    float:left; 
    width:100%; 
    background:#cfc; 
} 


#bottom{ 
    width:100%; 
    background:#fcc; 
    clear:both; 
    overflow:scroll; 
    position:fixed; 
    bottom:0; 
}

のJavaScript（頭に配置する）：

function getDocHeight() { 
    var D = document; 
    return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight)); 
} 

window.onload = function() { 
    document.getElementById('bottom').style.height = getDocHeight() - (100 + document.getElementById('middle').offsetHeight) + "px"; 
} 

window.onresize=window.onload;

getDocHeight()機能はこちらから：http://james.padolsey.com/javascript/get-document-height-cross-browser/

出典

2011-07-20 03:23:41

相対的なdiv内の絶対オーバーフローdivを押し下げる

答えて

関連する問題