Question

我有一个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>

和css：

body
{
    background-color: rgb(200, 200, 200);
    z-index: 0;
    margin-top: 50px; 
}
/* */
.header
{
    width: 100%;
    background-color: rgb(8, 36, 86); 
    color: white;
    height: 2em; 
    padding: .5em;  
    z-index: 1000; 
    top: 0px;
    position: fixed;
    font-family: times, serif; 
    display: inline-block;
    /*margin-left: -9999px;*/
}

但每当我运行此标题时，标题都不会在整个页面中展开，而且还有一个小补丁，它不会出现在chrome或firefox中，如下所示：

enter image description here

我修改了css，以便标题标记的宽度为1000％，左边距为-9999px，但感觉就像是黑客攻击 - 有更好的方法吗？

Answer 1

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

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

Answer 2

使用Viewport units：vw, vh, vmin, vmax和box-sizing

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin:0;padding:0;
}
.body{
  width: 100vw;
  height: 100vh;
  background-color: rgb(200, 200, 200);
  z-index: 0;
  margin-top: 50px; 
}

Answer 3

将此css属性用于您希望与页面一样宽的任何元素：

width: 100%

Answer 4

浏览器的标签有默认值，例如，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; 
}

Answer 5

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

*{padding:0; margin:0;}

让div扩展到整个页面的更好方法是什么？

5 个答案: