无法使标题 div 适合整个屏幕答案

【问题标题】：Cannot make header div fit the whole screen无法使标题 div 适合整个屏幕
【发布时间】：2023-03-25 23:30:01
【问题描述】：

我正在做一个项目，我将标题的 div 设置为 100%，主容器也是 100%，但右侧和左侧由标题填充。而且顶部也不在最顶部，但我设法通过应用 -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。请建议另一种方式

非常感谢，节肢动物

【问题讨论】：

看来一切正常。可以的话可以加个截图吗？

标签： html css height width

【解决方案1】：

您需要从正文和其他元素中删除默认边距。 “通用”重置是一个不错的选择，但正确的重置 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>

【讨论】：

【解决方案2】：

尝试添加：

body {
    margin: 0;
}

as show in this fiddle.

【讨论】：

【解决方案3】：

大多数浏览器将8px 的默认margin 应用于<body> 的所有边。除此之外，您的<h1> 的边距也会导致您的#header DIV 被向下推。该边距还会导致低于#header 的DIV 被下推并在其间添加一个“空白”空间。

body,
#header h1 {
    margin: 0;
}

【讨论】：

【解决方案4】：

只需将margin 和property value 或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');

}
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>

【讨论】：