9

スタック オーバーフローと Web を読んだ後、1​​00% の高さを達成するには 2 つの主なトリックがあることがわかりました。

  1. HTML と BODY の両方で height:100% を設定します
  2. 次のいずれかを持つように要素を設定します。
    • 高さ:100%、または
    • 上:0、下:0、位置:絶対

ただし、これらのトリックを使用しても、絶対に配置された DIV の高さを真の 100% に設定するのは困難です。ビューポート サイズの 100% を取得できますが、ユーザーが下にスクロールすると、div の高さが実際には 100% ではないことが明らかになります。

私はここで状況の単純な JS Fiddle を作成しました: http://jsfiddle.net/9FEne/

私の質問は次のとおりです。真の（つまり、ビューポートの高さではなく、コンテンツの高さ）100％の高さの絶対配置divを取得するためのさらなるトリックを知っている人はいますか？

4

3 に答える 3

12

申し訳ありませんが、前に本当の質問を見逃していたので、ウィンドウを埋める必要があると思いました. 内容がウィンドウよりも長いことが問題である場合はposition:relative、本文に追加する必要があります。 http://jsfiddle.net/9FEne/7/

何が起こっているかというと、何かを絶対に配置すると、最も近くに配置された要素に対して相対的に配置 (およびサイズ) されます。ボディに配置するように指示しない場合は、ウィンドウに配置されます。

于 2012-04-13T19:12:42.843 に答える
7

jQueryを使用してこのトリックを実現できます

var h = $(window).height();
$('#yourdiv').height(h);
于 2012-04-13T18:58:27.187 に答える
4

ドキュメントの高さとウィンドウの幅にそれぞれ等しい高さと幅を割り当てるには、javascript を使用します。ここでそれを示すためにjsfiddleを変更しました：

http://jsfiddle.net/9FEne/1/

于 2012-04-13T19:01:27.037 に答える