0

私はサイドバーを持っていposition:fixedますheight:100%

しかし、その効果は私が望むものではありません。高さ100％はウィンドウの100％ですが、ヘッダーとフッターの間に閉じ込められているコンテナーの100％である必要があります。ヘッダーも固定されているため、メインコンテンツは「下」にスクロールし、フッターはメインコンテンツの下部に固定されます。これは、読み込まれるコンテンツの量に応じて高さが変化する可能性があります。

このjsfiddleul#toolBarListでは、デモンストレーションするためにtoの高さを設定し200pxました。ウィンドウを拡大して下にスクロールすると、サイドバーは空白の高さ全体になります。リストの背後に背景を設定するだけではなく、サイドバーの下部をフッターの上部に固定する必要があります。

100％が機能しない理由を確認するには、リストを設定200pxして100%、リストがフッターからどのようにオーバーフローするかを確認します。

答えは、簡潔なjavascriptでも、IE8 +、最新のchrome/firefoxと互換性のあるすべてのCSSでもかまいません。

どうもありがとう

4

2 に答える 2

0

すべての親要素の高さを 100% に設定するか、高さの代わりに次の CSS を使用する必要があります。

top: 0;
bottom: 0;
right: 0; //whichever side you want it on
于 2013-02-22T20:51:51.310 に答える
0

100% の高さは、親要素に明示的な高さが設定されている場合にのみ機能します。html 要素、body 要素、およびその間のその他のコンテナー要素に 100% の高さを設定することで、100% の高さを実現できます。例えば、

<html style="height: 100%;">
  <body style="height: 100%;">
    <div id="page" style="height: 100%;">
      <div id="sidebar" style="height: 100%; float: left;">content</div>
      <div id="main" style="height: 100%; float: left;">content</div>
    </div>
  </body>
</html>
于 2013-02-22T20:52:42.360 に答える