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

height: 100%在CSS中顯然不起作用。那麼有沒有其他的CSS或JavaScript/jQuery解決方案來解決這個問題？請指教。如何將div高度設置爲用戶顯示器分辨率的100％？

2011-03-03 Jacob

它可以工作，但用戶必須將瀏覽器置於全屏模式才能真正佔用整個空間。 – Dan 2011-03-03 03:40:30

CSS中的高度：100％完全按照規範中的描述工作。在這裏：http://www.w3schools.com/css/pr_dim_height.asp – simon 2011-03-03 03:42:49

即使你可以通過在html，body和wrapper divs上使用100％的高度在技術上解決它，我認爲有時可以設置100％的高度根據畫布高度減去其他已知高度的div，然後再次檢查調整大小。主要是因爲在製作大量網站之後，我發現純粹的CSS解決方案存在一些缺陷。我更喜歡基於此並通過JS進行改進。 – plebksig 2011-03-03 08:19:17

'假設你的問題元素是<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. */ 
}

來源

2011-03-03 03:43:30 Blender

只有在您願意將整個佈局限制在顯示器高度時才能使用 – thefreeman 2012-11-26 12:55:30

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

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

#contentDiv { 
    min-height: 100%; 
}

來源

2011-03-03 03:42:00 Melv

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

來源

2011-03-03 03:42:10 Rasika

使用jQuery，您可以使用：

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

來源

2011-03-03 05:14:58 jonwayne

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

你不能使用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); 
});

來源

2012-11-26 13:37:00 thefreeman

純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'); 
});

來源

2013-07-26 15:20:51

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

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

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

來源

2015-03-02 21:57:59

沒有使用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; 
}

來源

2015-10-27 07:36:28

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

回答

相關問題