无法使 header div 适合整个屏幕

Question

我正在做的项目是，我将 header 的 div 设置为 100%，主容器也是 100%，但是左右两侧要由header。顶部也不在最顶部，但我设法通过应用 -ve 边距来修复它，但不想在左侧和右侧这样做。

请帮我解决这个问题，这是 CSS 和 HTML 代码：

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}
#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}

<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

注：我用的是内嵌字体Junction，网上没有。而且，我不想将宽度增加到 120% 并使左边距为 -ve。请建议另一种方式

非常感谢，炭疽病

Answer 1

您需要删除正文和其他元素的默认边距。 'universal' 重置是一个不错的选择，但正确的重置 CSS 是最佳选择

* {
  margin:0;
  padding:0;
  }

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}

* {
  margin:0;
  padding:0;
  }

#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}

<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

Answer 2

只需将 margin 和 0 的 property value 添加到 body

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}
body {
  margin: 0;
}
#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}

<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

Answer 3

尝试添加：

body {
    margin: 0;
}

as show in this fiddle.

Answer 4

大多数浏览器将 8px 的默认值 margin 应用于 <body> 的所有边。除此之外，您的 <h1> 的边距也会导致您的 #header DIV 被压低。该边距还将导致 #header 下面的 DIV 被下推，并在

之间添加 "white" space

body,
#header h1 {
    margin: 0;
}

无法使 header div 适合整个屏幕

Cannot make header div fit the whole screen

html

css

height

width