html - 一些段落代码会影响我的网站定位吗？

Question

我对某事感到困惑，每次我将代码放在我的网站底部时都会将我的网站稍微向右抛出，这使得从该页面转到另一个页面时不和谐，你可以看到导航面板向右跳等

我是这方面的外行，正在设计我自己的艺术家网站。关于为什么我将其放入其中的任何建议。感谢任何帮助!

这是导致这种转变的代码:

<div class="copyright">
<p>
COPYRIGHT ©2017 WILSON SCHLAMME, ALL RIGHTS RESERVED
</p>
</div>

这是在 css 页面上:*请注意删除此 css 仍然不会减轻移位。

.copyright {
font-size: 51%;
color: #a6a6a6;
letter-spacing:1px;
padding-bottom:20px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino,                 
 serif;  
}

这是完整的代码:

* {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  /*For IE6 Shenanigans*/
  font-family: Verdana, Geneva, sans-serif;
  color: black;
}

.bio {
  color: #808080;
  line-height: 160%;
  line-spacing: 40%;
  max-width: 700px;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
  margin: 0 auto;
  text-align: left;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 48%;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
  letter-spacing: 2.5px;
  word-spacing: 25px;
  font-weight: 300;
  color: #bfbfbf;
}

#headerimg {
  padding-top: 30px;
}

li {
  display: inline;
}

.spacer1 {
  margin-top: 20px;
}

.spacer2 {
  margin-top: 50px;
}

.spacer3 {
  margin-top: 50px;
}

.spacer4 {
  margin-top: 50px;
}

.infoimg img {
  -webkit-box-shadow: 3px 4px 3px #7C7C7C;
  box-shadow: 3px 4px 3px #7C7C7C;
  min-width: 350px;
  display: inline-block;
  margin-top: 50px;
  border-style: solid;
  border-color: gray;
  border-width: 1px;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
}

.copyright {
  font-size: 51%;
  color: #a6a6a6;
  letter-spacing: 1px;
  padding-bottom: 20px;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
}

a {
  color: #a6a6a6;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.speech {
  font-size: 100%;
  color: #808080;
  line-height: 160%;
  line-spacing: 40%;
  max-width: 700px;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
  margin: 0 auto;
}

<div id="headerimg">
  <a href="index.html"><img src="img/headerfont2.PNG" style=" width:28%"> </a>
</div>

<div class="spacer1">

</div>
<div class="w3-container">
  <ul>
    <li><a href="index.html">VISUAL </a></li>
    <li><a href="info.html">INFO</a></li>
    <li><a href="contact.html">CONTACT</a></li>
  </ul>
</div>


<div class="infoimg">
  <img src="img/info.png" style="width:20%">
</div>

<div class="spacer2">

</div>

<div class="bio">
  <p>
    Wilson Schlamme was born in Jackson Mississippi in 1988. He graduated from the USC School of Cinematic Arts in 2010, focusing his studies on photography and visual design. Finding himself dissatisfied with the medium post college, Wilson shifted his work
    into painting, and spent the next several years developing a technique largely derived from fluid based paint and self crafted tools. Wilson currently lives in Los Angeles, where he creates abstract works, continuing the tradition of action painting
    and further progressing his organic and overwhelming fluid like style.
  </p>
</div>

<div class="spacer3">

</div>
<div class="speech">
  <p>
    <i>
    "While the work ranges in severity, it's structured around a succinct visual         
    reaction produced from color and textual blending. This reaction shapes not 
    only the core lines of each piece but is also the vocabulary of the work 
    itself.
    Aggressive blending of this sort (done not with a brush but with a hard 
    edge), combined with a limited color palette, allows for the viewer to feel 
    familiar and secure with the work while at the same time in question over 
    the fervent gestural movements. This polarization of the known yet unknown, 
    similar yet contrasting, is a circumstance that is shared both with the 
    viewer and theartist, and likewise becomes a focal point of shared 
    experience."
    </i>
  </p>
</div>

<div class="spacer4">
</div>

<div class="copyright">
  <p>
    COPYRIGHT ©2017 WILSON SCHLAMME, ALL RIGHTS RESERVED

</div>

Answer 1

您可以使用固定或绝对定位。 Fixed 将始终显示在屏幕上，即使在滚动期间也是如此；绝对会滚动:

.copyright {
    position: fixed;
    bottom: 20px;
    font-size: 51%;
    color: #a6a6a6;
    letter-spacing: 1px;
    font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
}

注意:为了固定位置，我删除了填充。

注意:我也没有得到转移，但是，我不会在页面之间来回移动。

样式看起来不错，只是要注意颜色对比。确保它通过无障碍标准，以便视力不佳的人能够阅读您的网站。