html - 屏幕右侧的空白

标签 html css

我的网站需要帮助，因为我的页面右侧似乎有相当大的白色空间。一切都适合页面，除非你向右滚动你会在我的网站之外的部分，所以我想做的就是限制观众向右滚动或像我一样摆脱那个空间当你可以比我构建的更向下滚动时已经完成了，代码如下所示:

html {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
body {
  background-color: white;
  width: 100%;
  height: 100%;
}
#Header {
  background-color: #2c3e50;
  width: 105%;
  height: 105px;
  margin: -1% -2.5%;
  position: relative;
}
#Title1 {
  width: 105%;
  height: 75px;
  background: #2c3e50;
  text-align: bottom;
  font-size: 250%;
  font-family: Helvetica;
  color: white;
  margin: 0.4% 1%;
  position: fixed;
}
#nav_bar1 {
  font-size: 175%;
  margin: -60px 45%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar1:hover {
  color: #18bc9c;
}
#nav_bar2 {
  font-size: 175%;
  margin: -60px 67%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar2:hover {
  color: #18bc9c;
}
#nav_bar3 {
  font-size: 175%;
  margin: -60px 80%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar3:hover {
  color: #18bc9c;
}
#Bootstrap {
  background-color: #18bc9c;
  width: 105%;
  height: 600px;
  margin: -2.5% -2.5%;
}
#Title2 {
  font-size: 320%;
  font-family: Helvetica;
  color: white;
  margin: 0% 25%;
}
#img {
  margin: 4% 45%;
}
#Start_bootstrap {
  width: 100%;
  margin: 0% 43%;
  font-family: Helvetica;
}
#Description {
  width: 100%;
  margin: 1% 41%;
  font-family: Helvetica;
}
#Portfolio {
  font-size: 270%;
  font-family: Helvetica;
  color: #2c3e50;
  margin: 280px auto;
}
#about {
  background-color: #18bc9c;
  width: 105%;
  height: 500px;
  margin: 795px -2.5%;
}
#about_title {
  margin: -1200px auto;
  font-size: 270%;
  font-family: Helvetica;
  color: #2c3e50;
}
#About_Me1 {
  width: 40%;
  margin: 1250px 30%;
  font-family: Helvetica;
  color: #2c3e50;
}
#Vertical_fix {
  width: 17.5%;
  margin: -161.5% 55%;
  font-family: Helvetica;
  color: #2c3e50;
}
#Vertical_fix2 {
  margin: -000px -300%;
  font-family: Helvetica;
  color: #2c3e50;
  font-size: 270%;
}
#Contact_Header {
  text-align: center;
  font-size: 270%;
}
#Contact_Info {
  width: 50%;
  margin: -1400px 25%;
  font-family: Helvetica;
  color: #2c3e50;
  position: absolute;
  bottom: 0;
}
.center {
  float: center;
  text-align: center;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 102.5%;
  height: 60px;
  background-color: #18bc9c;
  margin: -110% -0.85%;
  font-size: 75%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>

  <link rel="stylesheet" href="css.css">
</head>

<body>
  <div id="Header">
    <div id="Title1">.@BOOTSTRAP</div>
  </div>
  <div class="right" id="nav_bar1">EXPERIENCE</div>
  <div class="right" id="nav_bar2">ABOUT</div>
  <div class="right" id="nav_bar3">CONTACT</div>

  <div id="Bootstrap">
    <img src="profile.png" class="center" id="img">
    <h1 id="Start_bootstrap">START BOOTSTRAP</h1>
    <p id="Description">Web Developer - Graphic Artist - User Experience Designer</p>



    <div class="center" id="Portfolio">
      <p>My Experiences are..</p>
      <img src="C:\Users\ben\Pictures\inknpixel.png">
    </div>
  </div>

  <div id="about">
  </div>

  <div class="center" id="about_title">A bit more...</div>

  <p id="About_Me1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum arcu in massa dapibus, in vehicula mauris consequat. Suspendisse ac mauris quis lorem commodo scelerisque. Duis in commodo nisl, vel volutpat ipsum. Pellentesque placerat lobortis
    faucibus. Nulla interdum quam a risus, aliquam porta. Mauris pulvinar, ante a vulputate rutrum, lorem diam blandit est, non porta quam enim eu lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est
    ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus.</p>

  <p id="Vertical_fix">aliquam</p>
  </div>





  <div class="center" id="Contact_Info">
    <p style="color: #2c3e50; font-size: 270%; font-family: Helvetica; text-align: 60%">You can find me at...</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam
      nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus
    </p>
  </div>

  <div class="footer"></div>
</body>

</html>

最佳答案

问题是

#Start_bootstrap {
    margin: 0% 43%;
    width: 100%;
}
#Description {
    margin: 1% 41%;
    width: 100%;
}

基本上，您将它们的宽度设置为它们父级的 100%，然后将它们向右推很多。

如果要居中，更好用

#Start_bootstrap, #Description {
    text-align: center;
}


html {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
body {
  background-color: white;
  width: 100%;
  height: 100%;
}
#Header {
  background-color: #2c3e50;
  width: 105%;
  height: 105px;
  margin: -1% -2.5%;
  position: relative;
}
#Title1 {
  width: 105%;
  height: 75px;
  background: #2c3e50;
  text-align: bottom;
  font-size: 250%;
  font-family: Helvetica;
  color: white;
  margin: 0.4% 1%;
  position: fixed;
}
#nav_bar1 {
  font-size: 175%;
  margin: -60px 45%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar1:hover {
  color: #18bc9c;
}
#nav_bar2 {
  font-size: 175%;
  margin: -60px 67%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar2:hover {
  color: #18bc9c;
}
#nav_bar3 {
  font-size: 175%;
  margin: -60px 80%;
  color: white;
  font-family: Helvetica;
  position: fixed;
}
#nav_bar3:hover {
  color: #18bc9c;
}
#Bootstrap {
  background-color: #18bc9c;
  width: 105%;
  height: 600px;
  margin: -2.5% -2.5%;
}
#Title2 {
  font-size: 320%;
  font-family: Helvetica;
  color: white;
  margin: 0% 25%;
}
#img {
  margin: 4% 45%;
}
#Start_bootstrap, #Description {
  text-align: center;
  font-family: Helvetica;
}
#Portfolio {
  font-size: 270%;
  font-family: Helvetica;
  color: #2c3e50;
  margin: 280px auto;
}
#about {
  background-color: #18bc9c;
  width: 105%;
  height: 500px;
  margin: 795px -2.5%;
}
#about_title {
  margin: -1200px auto;
  font-size: 270%;
  font-family: Helvetica;
  color: #2c3e50;
}
#About_Me1 {
  width: 40%;
  margin: 1250px 30%;
  font-family: Helvetica;
  color: #2c3e50;
}
#Vertical_fix {
  width: 17.5%;
  margin: -161.5% 55%;
  font-family: Helvetica;
  color: #2c3e50;
}
#Vertical_fix2 {
  margin: -000px -300%;
  font-family: Helvetica;
  color: #2c3e50;
  font-size: 270%;
}
#Contact_Header {
  text-align: center;
  font-size: 270%;
}
#Contact_Info {
  width: 50%;
  margin: -1400px 25%;
  font-family: Helvetica;
  color: #2c3e50;
  position: absolute;
  bottom: 0;
}
.center {
  float: center;
  text-align: center;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 102.5%;
  height: 60px;
  background-color: #18bc9c;
  margin: -110% -0.85%;
  font-size: 75%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>

  <link rel="stylesheet" href="css.css">
</head>

<body>
  <div id="Header">
    <div id="Title1">.@BOOTSTRAP</div>
  </div>
  <div class="right" id="nav_bar1">EXPERIENCE</div>
  <div class="right" id="nav_bar2">ABOUT</div>
  <div class="right" id="nav_bar3">CONTACT</div>

  <div id="Bootstrap">
    <img src="profile.png" class="center" id="img">
    <h1 id="Start_bootstrap">START BOOTSTRAP</h1>
    <p id="Description">Web Developer - Graphic Artist - User Experience Designer</p>



    <div class="center" id="Portfolio">
      <p>My Experiences are..</p>
      <img src="C:\Users\ben\Pictures\inknpixel.png">
    </div>
  </div>

  <div id="about">
  </div>

  <div class="center" id="about_title">A bit more...</div>

  <p id="About_Me1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum arcu in massa dapibus, in vehicula mauris consequat. Suspendisse ac mauris quis lorem commodo scelerisque. Duis in commodo nisl, vel volutpat ipsum. Pellentesque placerat lobortis
    faucibus. Nulla interdum quam a risus, aliquam porta. Mauris pulvinar, ante a vulputate rutrum, lorem diam blandit est, non porta quam enim eu lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est
    ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus.</p>

  <p id="Vertical_fix">aliquam</p>
  </div>





  <div class="center" id="Contact_Info">
    <p style="color: #2c3e50; font-size: 270%; font-family: Helvetica; text-align: 60%">You can find me at...</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam
      nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus
    </p>
  </div>

  <div class="footer"></div>
</body>

</html>

关于html - 屏幕右侧的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28284224/

上一篇：css - HTML/CSS : image taking half screen with mouseover and link

下一篇：css - codeigniter Controller 和 controller/之间有什么区别？

相关文章：

php - 我可以将 php 链接添加到 $query 吗？

css - 使文本出现在褪色图像的顶部

css - Mac 系统字体@font-face 问题

javascript - 在 Jquery fadeIn() 之后移动的元素

html - 将 CSS 的边距归零是一个好习惯吗？

javascript - 当没有匹配的后代元素时隐藏父元素

html - 如何使动态 div 居中？

html - 如何在一个div中调整N个图像

html - 垂直对齐伪元素和怪异字符

jquery - 滚动到特定元素的底部，而不干扰页面的其余部分

©2024 IT工具网  联系我们