设置盒子宽度为100%，给一个背景颜色，缩小浏览器窗口，然后拖动滚动条到右侧，右侧的部分区域为空白的解决方法

本文链接：https://blog.csdn.net/qindapeng/article/details/126714898

问题描述：

全屏时正常显示宽度为百分之百，缩小屏幕，拉动底部滚动条原本宽度百分之百的盒子右侧有空白

解决办法：只需要给设置百分之百的盒子添加一个属性： min-width：值设置成和底下盒子一样宽就可以了

min-width：表示盒子的最小宽度

全屏时效果：

缩小屏幕，拉动底部滚动条原本宽度百分之百的盒子右侧有空白

解决后效果

html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="05.css">
</head>

<body>
	<header></header>
	<section></section>
	<section></section>
	<section></section>
</body>

</html>

css样式如下：

header {
  height: 100px;
  width: 100%;
  min-width: 1200px;
  background-color: blue;
}

section {
  background-color: pink;
  width: 1200px;
  height: 300px;
  margin: 0 auto;
}
section:nth-child(3) {
  background-color: orange;
}
section:nth-child(4) {
  background-color: red;
}