設置body height:100%不起做用

時間 2019-11-10

標籤設置 body height 100% 不起简体版

原文原文鏈接

當設置一個頁面元素的height爲100%時，但願這個頁面的元素能充滿整個視圖窗口，但height:100%卻沒有起到做用，爲何？css

這個跟瀏覽器計算寬高度有關，web瀏覽器在計算寬度是會考慮打開窗口的寬度，若是你不給寬度設置任何值，那麼內容就會平鋪寬度。在高度方面，瀏覽器不會去計算內容的高度，除非內容超出了屏幕的高度(出現滾動條的狀況)，因此說，獲取不到父元素的高度，也就沒有辦法去計算自身的高度(由於高度是按照百分比的，百分比參照的對象是父元素)，因此高度設置成百分比也就不起做用。要想解決，直接在html，body元素上都設置上height:100%;父元素有了高度，就有了參照，再設置其餘元素的百分比的高度就會有效html

如下上對比圖web

代碼：沒有給html設置高度height:100%瀏覽器

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		body{
			width: 100%;
			height: 100%;
			background-image: url('1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	
</body>
</html>

效果圖：url

代碼：給html設置了height:100%code

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			width: 100%;
			height: 100%;
			background-image: url('1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	
</body>
</html>

效果圖：htm

這樣就撐開了對象

完it