如何在网站两侧创建两个div列，实现黑色栏贴合页面边缘？

刚好我之前也做过类似的需求，给你两个实用的CSS方案，完美解决侧边栏贴合页面边缘的问题，先讲核心前提：浏览器默认会给body设置margin（一般是8px），所以第一步必须重置这个默认样式，否则侧边栏永远会和边缘有间隙。

方案一：Flex布局（推荐，适合带主内容区的场景） #

这种方式布局灵活，适合中间有主内容、两侧是侧边栏的网站结构：

HTML结构 #

<body>
  <!-- 左侧黑色栏 -->
  <div class="sidebar sidebar-left"></div>
  <!-- 中间主内容区 -->
  <div class="main-content">这里是你的网站主内容</div>
  <!-- 右侧黑色栏 -->
  <div class="sidebar sidebar-right"></div>
</body>

CSS样式 #

/* 重置所有元素的默认边距和内边距，消除浏览器自带的间隙 */
* {
  margin: 0;
  padding: 0;
  /* 让元素的width包含padding和border，避免布局错乱 */
  box-sizing: border-box;
}

/* 让body占满整个视口高度，保证侧边栏能铺满屏幕 */
body {
  min-height: 100vh;
  /* 用flex实现三列横向排列 */
  display: flex;
}

/* 侧边栏基础样式 */
.sidebar {
  width: 80px; /* 你提到的临时宽度，按需调整 */
  background-color: #000; /* 黑色背景 */
}

/* 左侧栏默认会紧贴页面左边 */
.sidebar-left {}

/* 右侧栏通过margin-left:auto自动推到页面最右侧 */
.sidebar-right {
  margin-left: auto;
}

/* 主内容区占满剩余空间 */
.main-content {
  flex: 1;
  padding: 20px; /* 给主内容加内边距，避免贴边 */
}

方案二：绝对定位（适合无主内容区，或侧边栏固定悬浮的场景） #

如果你的需求只是在页面两侧放两个黑色栏，不需要中间内容区，或者侧边栏要固定在屏幕上不随滚动移动，用绝对定位更直接：

HTML结构 #

<body>
  <div class="sidebar sidebar-left"></div>
  <div class="sidebar sidebar-right"></div>
  <!-- 主内容可以放在这里，注意要给主内容加左右padding避开侧边栏 -->
</body>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  /* 让绝对定位的侧边栏相对于body定位 */
  position: relative;
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0; /* 让侧边栏从顶部到底部铺满屏幕高度 */
  width: 80px;
  background-color: #000;
}

/* 左侧栏直接贴左边 */
.sidebar-left {
  left: 0;
}

/* 右侧栏直接贴右边 */
.sidebar-right {
  right: 0;
}

/* 如果有主内容，记得加左右内边距避开侧边栏 */
.main-content {
  padding: 20px 100px; /* 左右padding比侧边栏宽20px，避免内容被遮挡 */
}

关键注意点 #

1. 一定要重置*的margin和padding，这是贴合边缘的核心，之前手机应用里能完美贴合就是因为没有浏览器的默认边距
2. box-sizing: border-box是个好习惯，能避免你设置的width因为padding或border变大，导致布局超出预期
3. 两种方案都可以按需调整侧边栏的宽度、高度（比如不需要全屏高度的话，把top:0;bottom:0换成height: 100%或者固定高度）

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