html - CSS full width header (Full width, cannot see body background)

Question

我已经多次看到这个问题被问到，但是当我尝试实现他们的解决方案时，它似乎不起作用。

我目前开始使用外部样式表涉足 HTML 和 CSS。

我创建了一个包含以下内容的容器(边框只是为了帮助我了解容器):

header{
	width: 100%;
	height:100%;
	margin: 0 0 0 0;
	background: lightgrey;
	border: solid red;
}

header>h1{
	color:black;
	border: solid blue;
	margin: 0px 0px 0px 0px;
}

header>p{
	font-style: italic;
	text-align: left;
	color:white;
	border: solid yellow;
	margin: 0px 0px 0px 0px;
}

<header>
	<h1>My Web Space</h1>
	<p> First HTML Page using Sublime Text</p>
</header>

但是，当我在网页中运行它时，页眉的宽度不是浏览器窗口的 100%。我仍然可以在顶部、左侧和右侧看到 body 背景的一些粘液部分(在本例中为红色)。

我设置了sliderhomepage的高度和背景来呈现效果

Answer 1

将此添加到您的 css 中:

    *{
margin:0;
padding:0:
  box-sizing:border-box;
}
body{
width:100%;
max-width:100%;
height:100%;
}
header{
    height:100%;
    margin:0;
    background: lightgrey;
    border:2px  solid red;
}

看到它工作:

*{
margin:0;
padding:0:
  box-sizing:border-box;
}
body{
width:100%;
max-width:100%;
height:100%;
}
header{
    height:100%;
    margin:0;
    background: lightgrey;
    border:2px  solid red;
}

header>h1{
    color:black;
    border: solid blue;
    margin: 0px 0px 0px 0px;
}

header>p{
    font-style: italic;
    text-align: left;
    color:white;
    border: solid yellow;
    margin: 0px 0px 0px 0px;
}

<header>
    <h1>My Web Space</h1>
    <p> First HTML Page using Sublime Text</p>
</header>