使用CSS在div上删除文本

Question

我被困住了。自从我编写CSS以来已经有一段时间了。我只需要知道解决这个问题的方向。现在，背景并没有在我的主包装器div上一直向下延伸。

我尝试过改变一些事情，似乎没有任何工作。我尝试过使用clearfix，但这似乎也没什么作用。

非常感谢任何帮助！

＆＃13;

＆＃13;

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fdfdfd;
}

.wrapper {
  margin: auto;
  width: 1000px;
  min-height: 100%;
  background-color: #f5f4f0;
  overflow: hidden;
  height: 100vh;
}

.main {
  width: 1000px;
  padding-top: 14px;
  position: absolute;
  background-color: #f5f4f0;
  height: 100vh;
  float: left;
}

.clear {
  clear: both;
}

.logo {
  position: relative;
  background-color: #fcc700;
  margin: auto;
  width: 50%;
  width: 1000px;
  height: 193px;
}

.logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.spacer1 {
  background-color: #f5f4f0;
  margin: auto;
  width: 50%;
  width: 1000px;
  height: 14px;
}

.search {
  background-color: #f5f4f0;
  margin: auto;
  width: 50%;
  width: 1000px;
  height: 108px;
}

.menu {
  background-color: #dbdbdb;
  margin: auto;
  width: 50%;
  width: 1000px;
  height: 220px;
  position: relative;
}

.menu img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.square1 {
  background-color: #cdcdcd;
  margin: auto;
  width: 50%;
  width: 178px;
  height: 178px;
  border: 2px solid #d7d7d7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -780px;
  right: 0;
}

.square2 {
  background-color: #cdcdcd;
  margin: auto;
  width: 50%;
  width: 178px;
  height: 178px;
  border: 2px solid #d7d7d7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -390px;
  right: 0;
}

.square3 {
  background-color: #cdcdcd;
  margin: auto;
  width: 50%;
  width: 178px;
  height: 178px;
  border: 2px solid #d7d7d7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.square4 {
  background-color: #cdcdcd;
  margin: auto;
  width: 50%;
  width: 178px;
  height: 178px;
  border: 2px solid #d7d7d7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 390px;
  right: 0;
}

.square5 {
  background-color: #cdcdcd;
  margin: auto;
  width: 50%;
  width: 178px;
  height: 178px;
  border: 2px solid #d7d7d7;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 780px;
  right: 0;
}

.leftcolumn {
  background-color: #FFF;
  margin: auto;
  width: 50%;
  width: 480px;
  border: 2px solid #d7d7d7;
  position: absolute;
  left: 10px;
  line-height: 1;
}

.rightcolumn {
  background-color: #FFF;
  margin: auto;
  width: 50%;
  width: 480px;
  border: 2px solid #d7d7d7;
  position: absolute;
  left: 506px;
}

#recentarticles {
  color: #bbbbbb;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 13px;
  position: relative;
  border-bottom: 5px solid #fcc700;
  font: 20px "Times New Roman", Serif;
  margin: 1px;
  line-height: normal;
}

#recentarticlesbody {
  color: #bbbbbb;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 13px;
  padding-right: 5px;
  position: relative;
  font: 20px "Times New Roman", Serif;
  margin: 1px;
  line-height: normal;
}

#recentarticlesbody h1 {
  color: #373737;
  position: relative;
  font: 26px "Times New Roman", Serif;
  margin: 1px;
}

#recentarticlesbody h2 {
  color: #818181;
  position: relative;
  font: 18px "Times New Roman", Serif;
  margin: 1px;
}

#recentarticlesbody h1 a:link,
a:visited {
  color: #373737;
  position: relative;
  font: 26px "Times New Roman", Serif;
  margin: 1px;
}

#recentarticlesbody h1 a:hover,
a:active {
  color: #bbbbbb;
  position: relative;
  font: 26px "Times New Roman", Serif;
  margin: 1px;
}

#recentarticlesbody p {
  color: #aeaeae;
  position: relative;
  font: 12px "Verdana", Serif;
  margin: 1px;
}

#hotarticles {
  color: #bbbbbb;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 13px;
  position: relative;
  border-bottom: 5px solid #fcc700;
  font: 20px "Times New Roman", Serif;
  margin: 1px;
}

＆＃13;

<div class="wrapper">

  <div class="spacer1"></div>

  <div class="logo"><img src="images/logo.jpg"></div>

  <div class="search"></div>

  <div class="menu">
    <div class="square1">
      <a href=""><img src="images/vendorcontacts.jpg"></a>
    </div>
    <div class="square2">
      <a href=""><img src="images/tsdocuments.jpg"></a>
    </div>
    <div class="square3">
      <a href=""><img src="images/bookmarks.jpg"></a>
    </div>
    <div class="square4">
      <a href=""><img src="images/suggestfeat.jpg"></a>
    </div>
    <div class="square5">
      <a href=""><img src="images/news.jpg"></a>
    </div>
  </div>

  <!-- main section -->

  <div class="main">

    <div class="leftcolumn">
      <div id="recentarticles">Recent Articles</div>
      </span>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <a href="">
              <font color="000000">Maintenace Notifications</font>
            </a>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>
    </div>
    <div class="rightcolumn">
      <div id="hotarticles">Hot Articles</div>
      </span>
      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

      <div id="recentarticlesbody">
        <h1><a href="">Lorem ipsum dolor</a></h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</p>
          <p>18 March, 2018 in
            <font color="000000">Maintenace Notifications</font>
          </p>
      </div>

    </div>


  </div>

</div>

<!-- end main section -->

</div>

＆＃13;

＆＃13;

＆＃13;

Sample

Answer 1

你的html代码中有很多错误。我尽可能地纠正并更改了你的css中的一些颜色，以便更好地了解正在发生的事情。虽然您可能希望进一步修改，但这看起来仍然有效。将来，当您遇到html问题时，第一次检查应该类似于w3标记服务W3validator

我在你的HTML中发现的错误包括：

<h2> tags terminated with </p>
reuse of id's - should change these to class
2 stray </span> tags
1 stray </div>
<font> tag use - has been depreciated
no <head> tags, no <title> tag, no lang specified in <html> tag
no alt= on image tags

html {
      height: 100%;
    }

    body {
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: blue;
    }

    .wrapper {
      margin: auto;
      width: 1000px;
      min-height: 100%;
      background-color: #f5f4f0;
      overflow: hidden;
      height: 100vh;
    }

    .main {
      width: 1000px;
      padding-top: 14px;
      position: absolute;
      background-color: #f5f4f0;
      height: 100vh;
      float: left;
    }

    .clear {
      clear: both;
    }

    .logo {
      position: relative;
      background-color: #fcc700;
      margin: auto;
      width: 50%;
      width: 1000px;
      height: 193px;
    }

    .logo img {
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .spacer1 {
      background-color: #f5f4f0;
      margin: auto;
      width: 50%;
      width: 1000px;
      height: 14px;
    }

    .search {
      background-color: #f5f4f0;
      margin: auto;
      width: 50%;
      width: 1000px;
      height: 108px;
    }

    .menu {
      background-color: #dbdbdb;
      margin: auto;
      width: 50%;
      width: 1000px;
      height: 220px;
      position: relative;
    }

    .menu img {
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .square1 {
      background-color: #cdcdcd;
      margin: auto;
      width: 50%;
      width: 178px;
      height: 178px;
      border: 2px solid #d7d7d7;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -780px;
      right: 0;
    }

    .square2 {
      background-color: #cdcdcd;
      margin: auto;
      width: 50%;
      width: 178px;
      height: 178px;
      border: 2px solid #d7d7d7;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -390px;
      right: 0;
    }

    .square3 {
      background-color: #cdcdcd;
      margin: auto;
      width: 50%;
      width: 178px;
      height: 178px;
      border: 2px solid #d7d7d7;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .square4 {
      background-color: #cdcdcd;
      margin: auto;
      width: 50%;
      width: 178px;
      height: 178px;
      border: 2px solid #d7d7d7;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 390px;
      right: 0;
    }

    .square5 {
      background-color: #cdcdcd;
      margin: auto;
      width: 50%;
      width: 178px;
      height: 178px;
      border: 2px solid #d7d7d7;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 780px;
      right: 0;
    }

    .leftcolumn {
      background-color: #FFF;
      margin: auto;
      width: 50%;
      width: 480px;
      border: 2px solid #d7d7d7;
      position: absolute;
      left: 10px;
     
    }

    .rightcolumn {
      background-color: #FFF;
      margin: auto;
      width: 50%;
      width: 480px;
      border: 2px solid #d7d7d7;
      position: absolute;
      left: 506px;
    }

    #recentarticles {
      color: #bbbbbb;
      padding-top: 15px;
      padding-left: 15px;
      padding-bottom: 13px;
      position: relative;
      border-bottom: 5px solid #fcc700;
      font: 20px "Times New Roman", Serif;
      margin: 1px;
      line-height: normal;
    }

    #recentarticlesbody {
      color: #bbbbbb;
      padding-top: 15px;
      padding-left: 15px;
      padding-bottom: 13px;
      padding-right: 5px;
      position: relative;
      font: 20px "Times New Roman", Serif;
      margin: 1px;
      line-height: normal;
    }

    #recentarticlesbody h1 {
      color: #373737;
      position: relative;
      font: 26px "Times New Roman", Serif;
      margin: 1px;
    }

    #recentarticlesbody h2 {
      color: #818181;
      position: relative;
      font: 18px "Times New Roman", Serif;
      margin: 1px;
    }

    #recentarticlesbody h1 a:link,
    a:visited {
      color: #373737;
      position: relative;
      font: 26px "Times New Roman", Serif;
      margin: 1px;
    }

    #recentarticlesbody h1 a:hover,
    a:active {
      color: #bbbbbb;
      position: relative;
      font: 26px "Times New Roman", Serif;
      margin: 1px;
    }

    #recentarticlesbody p {
      color: #aeaeae;
      position: relative;
      font: 12px "Verdana", Serif;
      margin: 1px;
    }

    #hotarticles {
      color: #bbbbbb;
      padding-top: 15px;
      padding-left: 15px;
      padding-bottom: 13px;
      position: relative;
      border-bottom: 5px solid #fcc700;
      font: 20px "Times New Roman", Serif;
      margin: 1px;
      line-height: normal;
    }

<!DOCTYPE html> 
<html lang='en'>
<head><title>hi</title></head>
<body>




    <div class="wrapper">

      <div class="spacer1"></div>

      <div class="logo"><img src="images/logo.jpg" alt='nogo'></div>

      <div class="search"></div>

      <div class="menu">
        <div class="square1">
          <a href=""><img src="images/vendorcontacts.jpg" alt='nogo'></a>
        </div>
        <div class="square2">
          <a href=""><img src="images/tsdocuments.jpg" alt='nogo'></a>
        </div>
        <div class="square3">
          <a href=""><img src="images/bookmarks.jpg" alt='nogo'></a>
        </div>
        <div class="square4">
          <a href=""><img src="images/suggestfeat.jpg" alt='nogo'></a>
        </div>
        <div class="square5">
          <a href=""><img src="images/news.jpg" alt='nogo'></a>
        </div>
      </div>

      <!-- main section -->

      <div class="main">

        <div class="leftcolumn">
          <div id="recentarticles">Recent Articles</div>
          

          <div id="recentarticlesbody0">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <a href="">
                  <span style="color:pink">Maintenace Notifications</span>
                </a>
              </p>
          </div>

          <div id="recentarticlesbody1">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody2">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody3">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody4">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody5">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody6">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody7">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody8">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody9">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>
        </div>
        <div class="rightcolumn">
          <div id="hotarticles">Hot Articles</div>
          
          <div id="recentarticlesbody10">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody11">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody12">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody13">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody14">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody15">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody16">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody17">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody18">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
               <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

          <div id="recentarticlesbody19">
            <h1><a href="">Lorem ipsum dolor</a></h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi...[]</h2>
              <p>18 March, 2018 in
                <span style="color:pink">Maintenace Notifications</span>
              </p>
          </div>

        </div>


      </div>

    </div>

    

    

</body>
</html>

Answer 2

在.main和.wrapper类中，您将高度设置为100vh。由于1 vh是视口高度的1％，因此主div（和背景）将是用户屏幕的高度。如果您的页面在开始向下滚动时比其屏幕更高，则背景将结束。

您可以只使用“height：100vh”来解决问题，或者您可能必须指定“height：none”