Question

我正在尝试创建导航栏。但是，不是跨越网站整个宽度的边界，它保持在边界设置的参数范围内。我似乎无法创建导航栏并在整个网站的其余部分继续使用垂直边框。我已将Jsfiddle作为视觉指南附上，因为我可能无法正确解释。事先有义务帮助你。

HTML - 
<section class="section section--full section--intro">
 <div class="contain">
  <h1>
   <span class="identity"> TestTest</span>
   <span class="menu">MENU</span>
  </h1>
 </div>
</section>

CSS -
.section--full {
min-height: 100%;
overflow: hidden;
}
.section--intro {
background-image:url();
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: rgb(163, 163, 163);
color: rgb(221, 221, 221);
line-height: 1.5;
display: table;
height: 100%;
min-height: 100%;
padding: 20% 0px;
width: 100%;
text-align: center;
font-family: GalaxiePolarisLight;
}
.section--intro .identity {
display:block;
top: 0px;
letter-spacing: -0.5px;
font-size: 35px;
text-transform: uppercase;
color:#fff;
margin: 0;
padding:20px 30px;
left: 0px;
z-index: 99;
position: fixed;
float: left;
}
.section--intro .menu {
display:block;
top: 0px;
color: #fff;
letter-spacing: -0.5px;
font-size: 40px;
text-transform: uppercase;
margin: 0;
padding:20px 30px;
z-index: 99;
right: 0px;
position: fixed;
float: right;
}
html {
background-color: rgb(189, 189, 189);
height: 100%;
margin: 0px;}

Answer 1

只需重置身体边距demo

即可

body{
  margin: 0;
  height: 100vh /*Set the body height*/
}

Answer 2

没有必要重置html上的保证金，默认情况下它没有。
您需要重置body标记上的边距，并在您的情况下将其设为min-height: 100%;。
如果您想从框模型中排除任何边框，请使用box-sizing: border-box;

想要创建全宽导航栏，但我不能因为我的边框

2 个答案: