2017-07-03 10 views
0

オープン時にdivウィンドウのサイズをブラウザウィンドウのサイズに設定します。ウィンドウの高さを取得し、divのサイズをこの高さに設定します。

私はサイズを変更したいのdivが.. ..ウィンドウの高さを取得するために

var height = window.innerHeight 
    || document.documentElement.clientHeight 
    || document.body.clientHeight; 

が、今、私は私はHTMLに、この高さを渡すことができる方法についての立ち往生していますが、これを使用しています内部に多くのコンテンツがあるので、私はreplaceWith()を使用して新しい高さのCSSをインラインにすることはできないと思うので、他のHTMLもすべて渡す必要があります。

jsやjQの両方で回答できるのなら、それは素晴らしいことです。

は次元の単位「VH」と「VW」はこの種のものを行うにはCSS3に追加されたあなたの

+0

[OK]をので、私たちはあなたのコードのビットを参照する必要があるかもしれません。単にCSSでやって...いいえ? – Kiwad

答えて

2

フィドル:https://jsfiddle.net/d0ufr8hx/

HTML:

<div> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<div> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<div> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 

のjQuery:

div { 
    width: 100vw; 
    height: 100vh; 
} 
:また

$(document).ready(function() { 
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

    $('div').height(height) 
}); 

、純粋なCSSのソリューション(vhvw)を使用します

古いブラウザをサポートしようとしている場合は、 などのいずれもIE 11以降ではサポートされていないなど、vhvwに注意してください。Browser support for vhbrowser support for vw

+0

素晴らしい!その知識のおかげで、ありがとう。 – James

3

ありがとうございます。高さを100vhに設定すると、あなたが望むことができます。

+0

これを少し拡張すると、 "vh"と "vw"はそれぞれビューポートの高さとビューポートの幅を表します。各単位は、現在のビューポートサイズの1/100を表します。したがって、100vh =ビューポートの現在の高さの100%です。ビューポートのサイズを変更するとサイズが再計算されるため、ブラウザウィンドウのサイズを変更してもdivは常にビューポートの高さの100%になります。 –

1

だからあなたの純粋なJavaScriptコードに応じてあなたはこれを試してみてくださいすることができます - あなたはJSでそれを行う必要があるだろう、なぜ私は見ていないので

<div id="divId"></div> 

document.getElementById('divId').style.height = height +"px" 
関連する問題