文章/答案/技术大牛

发布

社区首页 >问答首页 >无法使标题div适合整个屏幕。

问无法使标题div适合整个屏幕。
EN

Stack Overflow用户

提问于 2015-10-13 15:29:12

回答 4查看 200关注 0票数 0

我正在进行的项目中，我将标题的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>

注:我使用嵌入式字体连接，这是不在线的。而且，我也不想增加宽度到120%，并使左边框-ve。请建议另一种方法

太感谢你了，阿尔萨斯

html

css

height

width

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-10-13 15:33:15

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

票数 3

Stack Overflow用户

发布于 2015-10-13 15:33:24

试着添加：

body {
    margin: 0;
}

就像这把小提琴上所显示的那样。

票数 1

Stack Overflow用户

发布于 2015-10-13 15:33:24

只需将margin与property value of 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33106711

复制

相似问题

问无法使标题div适合整个屏幕。
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使标题div适合整个屏幕。EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使标题div适合整个屏幕。
EN