右侧

右侧

关注
发信
关注(28)粉丝(399)

html - 屏幕右侧的空白

我的网站需要帮助，因为它的页面右侧似乎有相当大的白色空间。一切都适合页面，除非您要向右滚动，否则将不在我的网站范围内，因此，所有要做的就是限制查看者向右滚动或摆脱该空间，就像我在进一步滚动时所做的那样低于我构建的代码，代码如下所示：



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/

10-13 01:22
Powered by LMLPHP ©2024 右侧 0.025397