獲取窗口高度並將div大小設置爲此高度

我想將div大小設置爲打開時瀏覽器窗口的大小。獲取窗口高度並將div大小設置爲此高度

我使用該工具來獲取窗口高度..

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

，但現在我堅持，我怎麼可以在這個高度傳遞到HTML ..

我想調整的DIV有很多內容，所以我不認爲我可以簡單地使用replaceWith（）並將新的高度CSS內聯，因爲我需要也傳遞所有其他HTML將是一個很大的痛苦。

如果你可以在js和/或jQ中回答，那就太棒了。

謝謝

來源

2017-07-03 James

好了，所以我們可能需要去看了一下你的代碼，因爲我不明白你爲什麼會需要做的是在JS 。只需在CSS中執行...不是？ – Kiwad

小提琴：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：

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

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

或者，使用純CSS溶液（vh和vw）：

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

如果您嘗試支持舊版瀏覽器，請謹慎使用vh和vw，例如在IE 11之外都不支持。Browser support for vh,browser support for vw。

來源

2017-07-03 18:25:26 Lansana

太棒了！感謝那一點知識。 – James

的尺寸單位「VH」和「大衆」被添加到CSS3做這樣的事情。設置高度爲100vh應該做你想要的。

來源

2017-07-03 18:24:47 Jason

爲了擴大這一點，「vh」和「vw」分別代表視口高度和視口寬度。每個單位表示當前視口大小的百分比（1/100），因此100vh ==視口當前高度的100％。如果視口更改大小，則重新計算大小，因此即使調整瀏覽器窗口的大小，div也始終爲視口高度的100％。 –

所以要根據您的純JavaScript代碼，你可以試試這個： -

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

document.getElementById('divId').style.height = height +"px"

來源

2017-07-03 18:30:45

獲取窗口高度並將div大小設置爲此高度

回答

相關問題