如何实现单个div占满页面全部水平空间？

嘿，没问题！单个div完全能实现占满页面顶部全部水平空间的效果，你遇到的问题大概率是没处理浏览器的默认样式——大部分浏览器会给<body>标签设置默认的margin（一般是8px左右），这会让你的div即使设了width:100%也会左右留白。

我给你一套简单的解决方案，直接套用就能解决：

第一步：重置基础样式 #

先把浏览器的默认边距清掉，最稳妥的方式是用通配符重置所有元素的默认样式（能避免后续其他元素的样式冲突）：

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Orbitron');

/* 重置所有元素的默认边距和内边距，同时设置盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 可以在这里加页面背景色等全局样式 */
}

第二步：给你的div设置样式 #

接下来只需要给目标div设置width: 100%，如果需要内边距或者边框，box-sizing: border-box会保证这些不会让div超出页面宽度：

/* 你的顶部div样式 */
.top-header {
  width: 100%;
  background-color: #3498db; /* 加个背景色方便看效果 */
  padding: 15px; /* 示例内边距，不会破坏满宽效果 */
  /* 可以根据需求加高度，比如 height: 60px; */
}

对应的HTML结构就这么简单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>满宽顶部div示例</title>
  <link rel="stylesheet" href="你的样式文件.css">
</head>
<body>
  <div class="top-header">这是占满顶部水平空间的div</div>
</body>
</html>

关键点解释 #

• box-sizing: border-box：这个属性会让元素的width包含内边距（padding）和边框（border），避免设置padding后div宽度超出100%。
• 一定要确保div本身没有设置左右margin，否则也会出现留白。

这样调整后，你的div就能完美占满页面顶部的全部水平空间啦！

内容的提问来源于stack exchange，提问作者Bernardo Kropiwiec