網頁屏幕縮小到出現水平滾動條後，背景不能100%填充

時間 2019-12-09

原文原文鏈接

不知你們遇到過這種問題沒，一個層寬度設爲100%，並設置背景圖片，在瀏覽器中瀏覽，縮小窗口到滾動條出現，而後拖動滾動條到右側，右側的區域變成空白，再拖大窗口，又能佔滿窗口了，這究竟是怎麼回事，又該如何解決這個問題呢？
下面用實例來分析，代碼以下：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0}
		.wrap{
			height: 40px;background-color: #ccc;
		}
		.box{
			width: 1000px; 
			margin:0 auto;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">example</div>
	</div>
</body>
</html>

展現效果以下圖：spa

從上面代碼來看是因爲類名爲box的div寬度設置爲1000px,單縮小窗口的寬度小於1000PX 時，實際body元素的寬度沒有被撐開到1000PX.而是按默認設置爲「瀏覽器可視窗口的寬度」和」min-width」屬性中的最大值來解析的。.net

解決方法就是給其父級元素添加min-width=1000px（可在body元素上加min-width=1000px）屬性便可。code

解決代碼以下：htm

*{margin:0;padding:0}
body {
    min-width: 1000px;
}
.wrap{
    height: 40px;background-color: #ccc;
}
.box{
    width: 1000px; 
    margin:0 auto;
    background-color: yellow;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。