如何使<body>中的div铺满浏览器整个宽度？

API 探路者

2026-8-21

黑色div无法铺满浏览器宽度的解决方法

问题的核心是浏览器默认给html和body元素添加了margin和padding，这就是你看到红色（html边框）和绿色（body边框）之间存在间隙的原因；另外body设置width: 100%会和默认边距冲突，导致子元素无法正常铺满宽度。

解决步骤：

重置html和body的默认边距与内边距，消除间隙
移除body的width: 100%设置（块级元素默认会自动填充父容器宽度）
确保黑色div作为块级元素自动继承父容器的宽度

修改后的CSS代码：

html {
    border: 1px solid red;
    overflow: scroll;
    overflow-x: hidden;
    margin: 0; /* 重置默认margin */
    padding: 0; /* 重置默认padding */
}

body{
    border: 1px solid green;
    height:500px;
    margin: 0; /* 重置默认margin */
    padding: 0; /* 重置默认padding */
    /* 移除width:100%，避免和边距冲突 */
}

#blackrect{
    margin-top:50px;
    background-color: black;
    height: 200px;
    min-height: 200px;
    /* 块级元素默认width:100%，无需额外设置 */
}