ウェブページの下部にDIVを100％の高さでオーバーフローさせる方法：CSSのみを使用して自動？

サラムすべて、ウェブページの下部にDIVを100％の高さでオーバーフローさせる方法：CSSのみを使用して自動？

は、私は2つのセクション、ヘッダとコンテンツ、ヘッダの高さが知られており、固定されたHTMLページを持っており、コンテンツの高さは、Webページの残りの領域を気力する必要があります。コンテンツセクションがウェブページの残りの部分を占める間、コンテンツがウェブページの高さよりも大きい場合はスクロールバーが表示されます（私はウェブページのスクロールバーを表示したくない、コンテンツDIVスクロールバーのみを表示する）。

私は、Javascriptを使用して、すでに（私は私が望む結果を持っている）、これを行っている

私の質問です：私はCSSを使用して同じ動作をすることができますか？

CSSファイル（site.css）：

html, body 
{ 
height:100%; 
width:100%;  
padding:0; 
margin:0; 
} 

#header 
{ 
height:85px; 
width:100%; 
background-color : yellow; 
} 

#container 
{ 
height: 100%; 
width:auto; 
background-color : green; 
padding:2px; 
margin: 0 auto; 
} 

#maindiv 
{ 
height:100%; 
width:100%; 
overflow:auto; 
}

HTMLファイル：

<!DOCTYPE html> 
<html> 
<head> 
<link href="Site.css")" rel="stylesheet" type="text/css"/> 
</head> 
<body onresize="onheightchanged()" onload="onheightchanged()"> 
    <table id="header"> 
     <tr> 
      <td> 
      some headers <br /> 
      some headers <br /> 
      some headers <br /> 
      some headers <br /> 
      </td> 
     </tr> 
    </table> 
    <div id="container"> 
     <div id="maindiv"> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     function getDocHeight() { 
      var D = document; 
      return Math.max(
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)); 
     } 


     function onheightchanged() { 
      var container = document.getElementById("container"); 
      var newheight = getDocHeight() - 90; // 90 = header height (85) + padding/margin (5) 
      container.style.height = newheight + "px"; 
     } 
    </script> 
</body> 
</html>

出典

2011-09-13 Shadi

あなたは、おそらくこのような絶対的なコンテナのdivを設定する必要があります。

#container { 
    position: absolute; 
    top: 85px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    overflow: auto; 
    background-color : green; 
}

ます。またposition: fixedを使用しようとすることができます。

編集：例の追加されました私のバージョン：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    html, body 
    { 
    height:100%; 
    width:100%;  
    padding:0; 
    margin:0; 
    } 

    #header 
    { 
    height:85px; 
    width:100%; 
    background-color : yellow; 
    } 

    #container { 
     position: absolute; 
     top: 85px; 
     bottom: 50px; 
     left: 200px; 
     right: 30px; 
     overflow: auto; 
     background-color : green; 
    } 

    #maindiv 
    { 
    height:100%; 
    width:100%; 
    overflow:auto; 
    } 
    </style> 
    </head> 
<body> 
<table id="header"> 
<tr> 
     <td> 
     some headers <br /> 
     some headers <br /> 
     some headers <br /> 
     some headers <br /> 
     </td> 
    </tr> 
</table> 
<div id="container"> 
    <div id="maindiv"> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
    </div> 
</div> 
</body> 
</html>

出典

2011-09-13 08:26:01

ありがとうございます、このソリューションはIEとOperaにはうまくいきましたが、Chromeでも問題はありませんが、FF 6.0.2ではページのサイズを変更するとまだウェブページのスクロールバーが表示されています。 – Shadi

奇妙な、私のFF 6.0でうまく動作します。スクロールバーはコンテナから来ています。コンテナがページ境界に触れることがないように、左、右、および下の位置を調整することによってテストできます。ページの振る舞いをよりよく表示するはずです。 –

私は運がなかった、DIVの高さは、ページのサイズを変更すると自動的に更新されません、あなたは正しい動作、任意の手掛かりを持っているF5キーを押す必要がありますか？ – Shadi

使用オーバーフロー-Y：ここ

コードである隠されました。では、そのCSSでスクロールを生成します。

出典

2011-09-13 08:12:46

overflow:autoはパーセンテージベースの高さでは機能しません。あなたができることは、#maindivの高さをonHeightChanged()ファンクションに設定したあと、overflow:autoが機能するはずです。

出典

2011-09-13 08:13:48

あなたは再びJavaScriptに私を参照している、私はそれが唯一のCSSを使用したい、私はJavaScriptを使用してほしい結果を持っています。 – Shadi

ウェブページの下部にDIVを100％の高さでオーバーフローさせる方法：CSSのみを使用して自動？

答えて

関連する問題