Html 全屏宽度 div 区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8280716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full screen width div area
提问by doc holiday
What's the best approach to creating a div that will take the full width of the screen, no matter what resolution? I'm trying to add a 'top' bar and bottom 'footer' area with divs that have a black background and styled border that I'd create with a small image and repeat. For some reason my attempts are leading to small spaces on the top and sides of the div?
无论分辨率如何，创建一个将占据整个屏幕宽度的 div 的最佳方法是什么？我正在尝试添加一个“顶部”栏和底部“页脚”区域，其中 div 具有黑色背景和样式边框，我会用小图像创建并重复。出于某种原因，我的尝试导致 div 顶部和侧面的小空间？
My markup is similar to:
我的标记类似于：
<div id="top">
Top bar stuff
</div>
<div id="pagewrap">
All the page content
</div>
CSS
CSS
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
采纳答案by Ariful Islam
Just use top:0;and left: 0;and you can also eliminate padding: 0. Don't use top: 0;for other div except top, use left: 0;for other div for eliminate the left space.
只需使用top:0;andleft: 0;你也可以消除padding: 0。不要top: 0;用于除顶部之外的其他 div，left: 0;用于其他 div 以消除左侧空间。
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
top: 0;
left: 0;
}
回答by Jeroen
Usually this is the bodytag having some paddings and/or margins. Try adding:
通常这是body具有一些填充和/或边距的标签。尝试添加：
body {
padding: 0;
margin: 0;
}
If this works, you may want to consider using a normalization stylesheetthat fixes this type of issue as well as many other related types of issues.
如果可行，您可能需要考虑使用规范化样式表来修复此类问题以及许多其他相关类型的问题。
Extended answer...
扩展答案...
The above answers the core issue folks landing here seem to have. But to expand a bit, try to directly answer the original question, and also providing some staple code that I use for things nowaydays:
以上回答了登陆这里的人似乎有的核心问题。但是为了扩展一点，尝试直接回答原始问题，并提供一些我现在用于事物的主要代码：
Here's how I would create a full-width, but also full-height div inside a body in a cross-browser (but modern browser only) way:
以下是我将如何以跨浏览器（但仅限现代浏览器）的方式在主体内创建全宽但全高的 div：
document.getElementById("pagewrap").innerHTML = "All the page content<br>".repeat(100);* {
box-sizing: border-box; /* not completely needed, yet useful */
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex; /* or css grid for more intricate layouts */
flex-direction: column;
}
#top {
background-color: LightCoral;
height: 150px;
border-bottom: 3px solid Crimson;
}
#pagewrap {
background-color: LightGreen;
flex-grow: 1; /* make it stretch to the bottom even if little content */
overflow-y: scroll; /* optional */
}<div id="top">Top bar stuff</div>
<div id="pagewrap">All the page content</div>回答by Ariful Islam
Ensure that bodyhas paddingand marginset to 0in CSS.
确保body拥有padding并margin设置为0在CSS。
