我网站底部的不需要的空白

时间：2019-01-13 21:25:01

标签： html css 

.header {
  position: relative;
  top: 1px;
  left: 589px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.subtitle {
  position: relative;
  right: 26px;
  letter-spacing: 2px;
  padding-top: 5px;
  font-size: 21px;
  font-family: arial;
  font-weight: bold;
  color: #6b6b6b;
  text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}


/* Menu*/
nav {
  position: relative;
  left: 210px;
  height: 70px;
  border-radius: 60px;
  background: #dc67e9;
  width: 1000px;
}

ul {
  margin-left: 17%;
}

ul li {
  display: inline-block;
  line-height: 80px
}

ul li a {
  text-decoration: none;
  font-family: 'Coiny', cursive;
  font-size: 19px;
  color: white;
  padding: 0 20px
}

ul li a:hover {
  color: black;
}

.bannerimage {
  margin-left: 5px;
  margin-top: 4px;
}

.banner {
  margin-top: 4px;
  background-color: #dc67e9;
  width: 100%;
  height: 589px;
}

.bannerpromo1 {
  position: relative;
  bottom: 500px;
  margin-left: 60px;
  font-family: 'Lobster', cursive;
  color: black;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 70px;
}

.bannerpromo2 {
  position: relative;
  bottom: 470px;
  margin-left: -780px;
  font-family: 'Lobster', cursive;
  color: #585656;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 50px;
  text-align: center;
}

.subscribebanner {
  width: 250px;
  height: 50px;
  background-color: #dc67e9;
  position: relative;
  left: 190px;
  bottom: 430px;
  border: 4px solid white;
}

.subscribebannertext {
  margin-left: 30px;
  margin-top: 15px;
  font-family: 'Coiny', cursive;
  word-spacing: 2px;
  font-size: 30px;
}

.howitworks {
  font-size:60px;
  font-family: 'Lobster', cursive;
  text-shadow: #a8a8a8 4px 6px;
  margin-top: 50px;
  position: relative;
  left: 555px;
}

.subheaderbox1{
  position: relative;
  margin-top: 20px;
  right: 315px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox2{
  position: relative;
  bottom: 100px;
  left: 65px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox3{
  position: relative;
  bottom: 200px;
  left: 450px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaders {
  position: relative;
  bottom: 275px;
  font-size: 40px;
  margin-left: -265px;
  word-spacing: 250px;
  letter-spacing: 3px;
  color: white;
}

.box1{
  position: relative;
  right: 370px;
  bottom: 225px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box2{
  position: relative;
  right: -15px;
  bottom: 500px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box3{
  position: relative;
  right: -405px;
  bottom: 780px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.step1{
  position: relative;
  right: 932px;
  bottom: 219px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step2{
  position: relative;
  right: 546px;
  bottom: 493px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step3{
  position: relative;
  right: 153px;
  bottom: 766px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.section1{
  position: relative;
  margin-top: 20px;
  bottom: 660px;
  background-color: #adcae1;
  margin-left: -570px;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section2{
  position: relative;
  left: 149px;
  bottom: 660px;
  background-color: #adcae1;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section1title{
  padding-top: 80px;
  font-size: 70px;
}
.section1text{
  font-size: 40px;
  line-height: 50px;
  text-shadow: none;
  color: #f0f0f0;
  position: relative;
  bottom: 10px;
}
.section2title{
  padding-top: 100px;
  font-size: 70px;
}
.section2text{
  font-size: 35px;
  line-height: 40px;
  text-shadow: none;
  color: #f0f0f0;
  padding-left: 1px;
  position: relative;
  bottom: 20px;
}
.imgsect1{
  margin-left: 148px;
  position: relative;
  bottom: 1660px
}

.imgsect2{
  position: relative;
  bottom: 1668px;
  right: 571px;
}

.examples{
  font-size: 50px;
  text-align: center;
  line-height: 180px;
  position: relative;
  bottom: 1670px;
  right: 550px;
}
.examplesdesign1{
  position: relative;
  bottom: 2580px;
  right: 320px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
.examplesdesign2{
  position: relative;
  bottom: 1730px;
  right: 325px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
<!DOCTYPE html>
<html>
  <head>
    <title>SweetVie-Home-Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="indexstyle.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    <link rel="stylesheet" href="indexstyle.css">
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="topfiller"></div>

    <div class="header">
      <img src="images/logo.jpg" height="90" alt="SweetVieLogo">
      <h2 class="subtitle">Vegan Baking Made Easy</h2>
    </div>

    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">COMMUNITY</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">SUBSCRIBE</a></li>
      </ul>
    </nav>

    <div class="banner">
      <img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
      <h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
      <h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
      <div class="subscribebanner">
        <h3 class="subscribebannertext"> <a href="Subscribe.html" style="color: white"> SUBSCRIBE</a></h3>
      </div>
    </div>

    <div class="howitworks">
      <h1>How It Works</h1>
      <div class="subheaderbox1"></div>
      <div class="subheaderbox2"></div>
      <div class="subheaderbox3"></div>
      <div class="subheaders">
        <h2>Click Prepare Enjoy</h2>
      </div>

      <div>
        <img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
      </div>
      <h3 class="step1">Select one of the three<br>subscription options</h3>
      <div>
        <img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
      </div>
      <h3 class="step2">Get involved and play<br>with your food</h3>
      <div>
        <img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
      </div>
      <h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>

    <div class="section1">
      <h2 class="section1title">Food Time<br> Family Time</h2>
      <br>
      <p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
    </div>
    <div class="section2">
      <h2 class="section2title">The Next Step</h2>
      <br>
      <p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
    </div>
    <div class="imgsect1">
      <img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
    </div>
    <div class="imgsect2">
      <img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
    </div>

    <div class="examples">
      <h2>Showcasing a collection of our most classic recipes</h2>
      <img src="images/dessertsarranged.jpg" width="900px" height="800px" alt="">
    </div>
    <div class="examplesdesign1"></div>
    <div class="examplesdesign2"></div>
  </body>
</html>

我对网站底部为什么会有很大的空白感到困惑。我对html / css不太了解，但是我检查了网站的元素，似乎是div类“ howitworks”在创造了额外的空间。
我没有在div的CSS样式中看到可能导致此问题的问题，但是我还是非常不了解CSS属性及其各自元素之间的交互。任何帮助将不胜感激

1 个答案:

答案 0 :(得分：1)

您始终将position:relative与bottom: length结合使用以重新定位元素。

上述方法 仅重新定位元素的呈现层 ，而不是DOM中的实际元素。从技术上讲，这意味着您的元素仍然与在向其应用bottom之前的位置相同，因此它占用的空间相同。

一种快速而肮脏的解决方法是为您的最后一个元素提供较大的负底边空白，以弥补多余的空间。 再三考虑，最快的解决方法是将所有bottom: value替换为margin-top: -value。

这是您的布局的外观，其中bottom替换为负的上边距：

.header {
  position: relative;
  top: 1px;
  left: 589px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.subtitle {
  position: relative;
  right: 26px;
  letter-spacing: 2px;
  padding-top: 5px;
  font-size: 21px;
  font-family: arial;
  font-weight: bold;
  color: #6b6b6b;
  text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}


/* Menu*/
nav {
  position: relative;
  left: 210px;
  height: 70px;
  border-radius: 60px;
  background: #dc67e9;
  width: 1000px;
}

ul {
  margin-left: 17%;
}

ul li {
  display: inline-block;
  line-height: 80px
}

ul li a {
  text-decoration: none;
  font-family: 'Coiny', cursive;
  font-size: 19px;
  color: white;
  padding: 0 20px
}

ul li a:hover {
  color: black;
}

.bannerimage {
  margin-left: 5px;
  margin-top: 4px;
}

.banner {
  margin-top: 4px;
  background-color: #dc67e9;
  width: 100%;
  height: 589px;
}

.bannerpromo1 {
  position: relative;
  margin-top: -500px;
  margin-left: 60px;
  font-family: 'Lobster', cursive;
  color: black;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 70px;
}

.bannerpromo2 {
  position: relative;
  margin-top: -470px;
  margin-left: -780px;
  font-family: 'Lobster', cursive;
  color: #585656;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 50px;
  text-align: center;
}

.subscribebanner {
  width: 250px;
  height: 50px;
  background-color: #dc67e9;
  position: relative;
  left: 190px;
  margin-top: -430px;
  border: 4px solid white;
}

.subscribebannertext {
  margin-left: 30px;
  margin-top: 15px;
  font-family: 'Coiny', cursive;
  word-spacing: 2px;
  font-size: 30px;
}

.howitworks {
  font-size:60px;
  font-family: 'Lobster', cursive;
  text-shadow: #a8a8a8 4px 6px;
  margin-top: 50px;
  position: relative;
  left: 555px;
}

.subheaderbox1{
  position: relative;
  margin-top: 20px;
  right: 315px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox2{
  position: relative;
  margin-top: -100px;
  left: 65px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox3{
  position: relative;
  margin-top: -200px;
  left: 450px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaders {
  position: relative;
  margin-top: -275px;
  font-size: 40px;
  margin-left: -265px;
  word-spacing: 250px;
  letter-spacing: 3px;
  color: white;
}

.box1{
  position: relative;
  right: 370px;
  margin-top: -225px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box2{
  position: relative;
  right: -15px;
  margin-top: -500px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box3{
  position: relative;
  right: -405px;
  margin-top: -780px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.step1{
  position: relative;
  right: 932px;
  margin-top: -219px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step2{
  position: relative;
  right: 546px;
  margin-top: -493px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step3{
  position: relative;
  right: 153px;
  margin-top: -766px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.section1{
  position: relative;
  margin-top: 20px;
  margin-top: -660px;
  background-color: #adcae1;
  margin-left: -570px;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section2{
  position: relative;
  left: 149px;
  margin-top: -660px;
  background-color: #adcae1;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section1title{
  padding-top: 80px;
  font-size: 70px;
}
.section1text{
  font-size: 40px;
  line-height: 50px;
  text-shadow: none;
  color: #f0f0f0;
  position: relative;
  bottom: 10px;
}
.section2title{
  padding-top: 100px;
  font-size: 70px;
}
.section2text{
  font-size: 35px;
  line-height: 40px;
  text-shadow: none;
  color: #f0f0f0;
  padding-left: 1px;
  position: relative;
  bottom: 20px;
}
.imgsect1{
  margin-left: 148px;
  position: relative;
  margin-top: -1660px
}

.imgsect2{
  position: relative;
  margin-top: -1668px;
  right: 571px;
}

.examples{
  font-size: 50px;
  text-align: center;
  line-height: 180px;
  position: relative;
  margin-top: -1670px;
  right: 550px;
}
.examplesdesign1{
  position: relative;
  margin-top: -2580px;
  right: 320px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
.examplesdesign2{
  position: relative;
  margin-top: -1730px;
  right: 325px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
<!DOCTYPE html>
<html>
  <head>
    <title>SweetVie-Home-Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="indexstyle.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    <link rel="stylesheet" href="indexstyle.css">
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="topfiller"></div>

    <div class="header">
      <img src="images/logo.jpg" height="90" alt="SweetVieLogo">
      <h2 class="subtitle">Vegan Baking Made Easy</h2>
    </div>

    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">COMMUNITY</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">SUBSCRIBE</a></li>
      </ul>
    </nav>

    <div class="banner">
      <img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
      <h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
      <h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
      <div class="subscribebanner">
        <h3 class="subscribebannertext"> <a href="Subscribe.html" style="color: white"> SUBSCRIBE</a></h3>
      </div>
    </div>

    <div class="howitworks">
      <h1>How It Works</h1>
      <div class="subheaderbox1"></div>
      <div class="subheaderbox2"></div>
      <div class="subheaderbox3"></div>
      <div class="subheaders">
        <h2>Click Prepare Enjoy</h2>
      </div>

      <div>
        <img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
      </div>
      <h3 class="step1">Select one of the three<br>subscription options</h3>
      <div>
        <img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
      </div>
      <h3 class="step2">Get involved and play<br>with your food</h3>
      <div>
        <img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
      </div>
      <h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>

    <div class="section1">
      <h2 class="section1title">Food Time<br> Family Time</h2>
      <br>
      <p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
    </div>
    <div class="section2">
      <h2 class="section2title">The Next Step</h2>
      <br>
      <p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
    </div>
    <div class="imgsect1">
      <img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
    </div>
    <div class="imgsect2">
      <img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
    </div>

    <div class="examples">
      <h2>Showcasing a collection of our most classic recipes</h2>
      <img src="images/dessertsarranged.jpg" width="900px" height="800px" alt="">
    </div>
    <div class="examplesdesign1"></div>
    <div class="examplesdesign2"></div>
  </body>
</html>

但是，这以及您如何构建布局都不是一个好的设计实践（特别是因为您不知道需要补偿多少，因为元素在不同设备上的高度可能不同）。因此，在各种宽度的设备或宽度可变的设备上（如旋转手机或平板电脑）合理显示内容时，您会遇到很多麻烦。

一种更好的方法是重新考虑您的布局，可能使用容器/节，并允许内容在DOM中占据其空间并相应调整其父级大小。

注意：position:relative; left|top|bottom|right: length;是一种用于动画的技术，特别是因为它实际上并未从DOM中移出实际元素，因此因此不会触发DOM中后续元素的重新渲染，使动画在浏览器上非常轻便（不需要在每帧重新绘制文档的其余部分）。这不是用于布局的技术。

相关问题
最新问题