屏幕右侧的空白区域

时间：2015-02-02 18:23:17

标签： html css

我需要帮助我的网站，因为它似乎在我的页面右侧有一个相当大的白色空间。一切都适合页面，除非你向右滚动我的网站以外的部分，所以想要做的就是让观众不必滚动正确或摆脱那个空间正如我所做的那样，你可以向下滚动而不是我建造的，代码如下所示：

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

问题是

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

基本上，你将它们的宽度tp设置为其父级的100％，然后将它们向右推动很多。

如果您想要居中，请更好地使用

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

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题