# 响应式布局和固定宽高混用问题

响应式布局和固定宽高混用问题

两者混用，响应式布局失效了。为什么呢？

单个div：简单的响应式布局

一个简单的响应式布局代码：
HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script>
        document.documentElement.style.fontSize = window.innerWidth + "px";
    </script>
</head>
<body>
<div class="board"></div>
</body>
</html>

CSS文件：

/* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}

.board {
    width: 1rem;
    height: 500px;
    background-color: antiquewhite;
}

可以看到效果图（底部没有滚动条）：

img

增加div：固定宽高

增加一个div，给固定的宽高。当然不会超过前一个div的宽度。

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script>
        document.documentElement.style.fontSize = window.innerWidth + "px";
    </script>
</head>
<body>
<div class="board"></div>
<div class="top"></div>
</body>
</html>

CSS文件：

/* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}

.board {
    width: 1rem;
    height: 500px;
    background-color: antiquewhite;
}
.top {
    height: 100px;
    background-color: red;
}

img

出现了滚动条。原因是第1个div的宽度超过了body的宽度。为什么会这样呢？