Html 让div扩展到整个页面的更好方法？_Html_Css

Html 让div扩展到整个页面的更好方法？

html css

Html 让div扩展到整个页面的更好方法？,html,css,Html,Css,我有一个html页面，顶部有一个标题，下面是html的总和： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <css link here> </head> <body onload="prettyPrint()"> <div class="he

我有一个html页面，顶部有一个标题，下面是html的总和：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<css link here>
</head>


<body onload="prettyPrint()">
<div class="header">
</div>
</body>
</html>

但是，每当我运行此程序时，标题不会延伸到整个页面，并且有一个小补丁不会出现在chrome或firefox中，就像这样：

我已经修改了css，使标题标签的宽度为1000%，左边距为-9999px，但感觉像是一个黑客——有更好的方法吗？

使用：

vw、vh、vmin、vmax

和

html

和

body

元素通常将边距和填充设置为非零值。确保您的

html

和

body

具有

html, body {
    width:100%;
    margin:0;
    padding:0;
}

浏览器的标签有一个默认值，例如，body在我的firefox浏览器中有一个边距：8px，所以您必须通过显式定义来删除它

因此，似乎有必要为自己重新设置css，并在其中放入所有您想要的默认值，以便在不同的浏览器中获得唯一的结果

像bootstrap这样的框架内部有它

body
{
    background-color: rgb(200, 200, 200);
    z-index: 0;
    margin:0;
}
/* */
.header
{
    width: 100%;
    background-color: rgb(8, 36, 86); 
    color: white;
    height: 2em; 
    padding: .5em;  
    font-family: times, serif; 
}

每个浏览器都有一个默认的边距和填充，因此编写css时要做的第一件事是将所有元素设置为

*{填充：0；
页边距：0；}

使用此

css

属性可用于任何要与页面一样宽的元素：

width: 100%

body标签中经常有边距/填充。。。尝试将body标记的左边距设置为0？请注意，对旧浏览器的支持有限-，

body
{
    background-color: rgb(200, 200, 200);
    z-index: 0;
    margin:0;
}
/* */
.header
{
    width: 100%;
    background-color: rgb(8, 36, 86); 
    color: white;
    height: 2em; 
    padding: .5em;  
    font-family: times, serif; 
}

width: 100%