web-dev-qa-db-ja.com

ドキュメント/ウィンドウの高さに合わせて100％DIVの高さを適切に設定する方法は？

私は、y反復された背景画像で中央に配置されたラッパーを持っています：

<body>
    <div id="wrapper">
        ...some content
    </div>
</body>

#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}

問題：ウィンドウサイズがコンテンツから継承したラッパーの高さよりも大きい場合、画像は明らかにウィンドウの下部までy軸上で繰り返されません。

JQueryを使用して、実際のドキュメントの高さに応じてインラインCSSスタイルをラッパーに動的に適用しました（DOMの準備ができ、ウィンドウサイズ変更イベントが発生した場合）。

$(function(){
    $('#wrapper').css({'height':($(document).height())+'px'});
    $(window).resize(function(){
        $('#wrapper').css({'height':($(document).height())+'px'});
    });
});

このアプローチの問題は、ウィンドウの高さを以前にリサイズされた最大サイズよりも大きいサイズに拡張するたびに、ドキュメントの高さがこの差によって拡張し、ウィンドウを無限にリサイズし続けて無限がある場合、本質的にラッパーDIVを無限にすることです垂直表示スペース。

高さ1600pxの典型的な30インチインチディスプレイで、ユーザーがウィンドウの高さ1000pxでWebサイトを開き、ラッパーの高さが800pxの場合、上記のjQueryは背景画像を正しく1000pxに設定します。ウィンドウサイズをたとえば1400pxにすると、1400pxは新しいドキュメントサイズの「デフォルトを記憶」し、ユーザーがウィンドウのサイズを元の1000pxの高さに変更しても更新されません。 スクロールバーの高さまで400px 一番下に。

これを修正する方法は？

更新：（window）.heightは機能しないようです。ウィンドウの高さがビューポートの高さだからです。ビューポートがコンテンツよりも小さく、スクロールすると、ラッパーは常にビューポートのサイズのままで、現在のビューポート位置の下部まで拡張しません。

jqueryhtmlcssheight
21
DominiqueBal

私は誰かの答えの助けを借りて自分でそれを理解しました。しかし、彼は何らかの理由でそれを削除しました。

解決策は次のとおりです。

  1. すべてのCSS高さハックと100％高さを削除します
  2. 2つのネストされたラッパーを使用します。 #wrapperと#truecontent
  3. ブラウザのビューポートの高さを取得します。 #wrapperより大きい場合は、＃wrapperのインラインCSSを設定して、現在のブラウザーのビューポートの高さに合わせます（#truecontentをそのまま保持します）

  4. （window）.resizeイベントをリッスンし、ビューポートが#truecontentの高さよりも大きい場合はインラインCSSの高さのみを適用し、そうでない場合はそのままにします

    $(function(){
    var windowH = $(window).height();
    var wrapperH = $('#wrapper').height();
    if(windowH > wrapperH) {                            
        $('#wrapper').css({'height':($(window).height())+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('#wrapper').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('#truecontent').height();
        if(windowH > truecontentH) {
            $('#wrapper').css('height', (newH)+'px');
        }

    })          
});
24
DominiqueBal

最も簡単な方法は以下を追加することです：

$('#ID').css("height", $(document).height());

正しいページの高さがブラウザによって決定された後。ドキュメントの高さをもう一度変更した場合は、上記のコードを再実行してください。

24
Tharindu Liyanage

absoluteにし、topとbottomにゼロを置くことができます：

#fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}
11
Jovan Perovic

私が見つけた最も簡単な方法は、CSSのビューポート高さです。

div {height: 100vh;}

これにより、ブラウザウィンドウのビューポートの高さが取得され、サイズ変更時に更新されます。

「ブラウザの互換性リストについては「使用できます」

5
hlv
html, body {
    height:100%;
}
#wrapper {
    min-height:100%;
}
4
Will

これは私がそれに答えた方法です

<script type="text/javascript">
    function resizebg(){
        $('#background').css("height", $(document).height());
    }
    $(window).resize(function(){
        resizebg(); 
    });
    $(document).scroll(function(){
        resizebg(); 
    });
    //initial call
    resizebg();

</script>

css：

#background{
position:absolute;
top:0;
left:0;
right:0;
}

基本的にすべてのサイズ変更イベントで、この場合は背景のオーバーレイとして使用する画像のdivの高さを上書きし、不透明度がそれほどカラフルではなく、私の場合は背景色で色付けすることもできます.

しかし、それは別の話です

2
Arthur Kielbasa

#element{ height:100vh}を使用

これにより、#elementの高さがviewportの100％に設定されます。お役に立てれば。

1
kishan phadte

これはどう

<style type="text/css">
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background: url('image.JPG') 250px 0px repeat-y;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function handleResize() {
var h = $(window).height();
        $('#wrapper').css({'height':h+'px'});
}
$(function(){
        handleResize();

        $(window).resize(function(){
        handleResize();
    });
});
</script>
</head>
<body>
        <div id="wrapper">
                ...some content
        </div>
</body>
0
t q

なぜwidth: 100%およびheight: 100%。

0
Navneeth G