问题描述：
问题代码：
<!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>
<style>
.outer {
width: 100%;
border-bottom: 10px solid red;
}
.inner {
margin: auto;
width: 1190px;
height: 50px;
background-color: royalblue;
}
</style>
</head>
<div class="outer">
<div class="inner"></div>
</div>
<body>
</body>
</html>
容器设置了百分百，版心是固定1190px，当放大浏览器的时候会出现版心超出父容器的问题
正常百分比：
放大后：
问题分析：
因为容器设置的是百分百，所以它的宽度会和浏览器是视口宽度一样，逐渐减小，而子元素的宽度是固定的，所以就会出现这个问题
问题解决：
给父容器设置最小的宽度大于子元素的宽度
min-width:1200px;
8003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
