Html 全屏宽分区

创建将占据整个屏幕宽度的div（无论分辨率如何）的最佳方法是什么？我正在尝试添加一个“顶部”栏和底部的“页脚”区域，其中的div具有黑色背景和样式化的边框，我将使用一个小图像创建并重复。出于某种原因，我的尝试会导致div顶部和两侧出现小空间

我的标记类似于：

<div id="top">

Top bar stuff

</div>

<div id="pagewrap">

All the page content

</div>

---

确保

body

在CSS中将

padding

和

margin

设置为

0

。

只需使用

top:0和
左：0填充：0
。不要使用
top:0对于除顶部以外的其他div，使用
left:0用于其他div，以消除剩余空间

#top {
   width: 100%;
   margin: 0;
   padding: 0;
   background-color:#000
   top: 0;
   left: 0;
}

通常这是带有一些填充物和/或边距的
主体
标签。尝试添加：

body {
  padding: 0;
  margin: 0;
}

如果这是可行的，您可能需要考虑修复这类问题以及许多其他相关类型的问题。
扩展答案…
以上回答了人们在这里登陆的核心问题。但要扩展一点，请尝试直接回答原始问题，并提供一些我现在使用的主要代码：

以下是我将如何以跨浏览器（但仅限于现代浏览器）的方式在主体内部创建全宽但全高的div：


document.getElementById（“pagewrap”）.innerHTML=“所有页面内容
”。重复（100）
*{
框大小：边框框；/*不完全需要，但很有用*/
}
html，正文{
保证金：0；
填充：0；
身高：100%；
}
身体{
显示：flex；/*或css网格，用于更复杂的布局*/
弯曲方向：立柱；
}
#顶{
背景颜色：浅珊瑚；
高度：150像素；
底边：3倍纯色深红色；
}
#换页{
背景颜色：浅绿色；
flex grow:1；/*即使内容很少，也要将其拉伸到底部*/
溢出y：滚动；/*可选*/
}
顶栏内容
所有的页面内容
这是为我修复的。我也在寻找同样的内容！
body {
  padding: 0;
  margin: 0;
}