如何將div高度設置爲用戶顯示器分辨率的100％？

Question

height: 100%在CSS中顯然不起作用。那麼有沒有其他的CSS或JavaScript/jQuery解決方案來解決這個問題？請指教。

Answer 1

'假設你的問題元素是<div>。如果你確保你的<div>的身高有某種參照，幾乎所有的問題都會消失：

#my_div 
{ 
    height: 100%; /* Won't work. What is 100% of an unknown/unset value? */ 
} 

確保<div>的父母擁有一套高度了。我通常這樣做（當然，不完全是，但你的想法）：

#my_div, #parent_of_the_div, body, html 
{ 
    height: 100%; /* This works, but it will show scrollbars if the body 
        or html elements have padding or margins. */ 
} 

Answer 2

所以你想要一個div是屏幕的高度？這有點不明顯，但CSS高度是正確的方法。訣竅是你需要讓HTML和body元素佔據頁面的整個高度，否則div佔用了100％的空間。我發現這樣做的最佳方式是：

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

#contentDiv { 
    min-height: 100%; 
} 

Answer 3

我不認爲你可以通過任何Web技術獲得顯示器的分辨率。你所做的就是使用Javascript來獲取瀏覽器的高度，並在CSS中設置div的高度屬性。 This post可能有助於獲得高度。 '

Answer 4

使用jQuery，您可以使用：

$('div.class').css('height', $(window).height()+'px'); 

Answer 5

我的答案建立在喬韋恩的，因爲沒有太多的解釋。

你不能使用CSS來獲取用戶監視器的值，但你可以通過javascript來實現。所以訣竅是將JavaScript添加到頁面加載事件中，該事件將根據瀏覽器窗口高度設置高度。使用jQuery，你可以用下面的代碼片段

// jquery shorthand for onLoad event 
$(function() { 
    // Set the css height property of #div_to_resize to the css 
    // height property of the browser window 
    $('#div_to_resize').css('height',$(window).css('height')); 
} 

您也可以選擇安裝到瀏覽器的縮放事件重置高度，如果窗口大小做到這一點。與以前的片段相結合，將是

// We extracted this to a function since we reference it more then once 
function matchHeight() { 
    $('#div_to_resize').css('height',$(window).height); 
} 

// jQuery shorthand for document.onload 
$(function() { 
    matchHeight(); 
    //On the resize event, call matchHeight() 
    $(window).resize(matchHeight); 
}); 

Answer 6

純CSS

#container { 
position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
} 

好運

或者javacript的Jquery：

就緒（在IE8不innerHeight）：

$(document).ready(function(){ 
var heightwindow = $(document).height(); 
$('#container').css('height', heightwindow+'px'); 
}); 

調整窗口大小：

$(window).resize(function() { 
var heightwindow = $(document).height(); 
$('#container').css('height', heightwindow+'px'); 
}); 

Answer 7

有幾個選項，你可能會發現有用：

vh (viewport height) 
vw (viewport width) 
vmin (viewport minimum length) 
vmax (viewport maximum length) 

#container{ 
height: 100vh; 
background: black; 
} 

Answer 8

沒有使用Javascript需要，becouse CSS3有大小的東西相對於當前視口大小一些新的價值觀：大衆， VH和VMIN

1vw = 1% of viewport width 
1vh = 1% of viewport height 
1vmin = 1vw or 1vh, whichever is smaller 
1vmax = 1vw or 1vh, whichever is larger 

，所以你可以把它寫在你的風格：

#contentDiv { 
    height: 100vh; 
}