页脚和背景图像之间的大白色 Space

Question

我只是有一个关于我的网站的快速问题。我的页脚和背景图像的末尾之间有一个巨大的空白，大约 500 像素左右。我似乎找不到问题所在，非常感谢任何帮助。

谢谢，

雅各布

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">

        <meta charset="UTF-8">
        <title> JP's Webservices</title>
    </head>
    <body>
      <div id ="body">  
        <div class = "nav">
            <ul> 
                <li> 
                  <a href = "#"> About Me </a> 
                </li> 
                <li> 
                  <a href = "#"> Contact Me </a> 
                </li>
                <li> 
                  <a href = "#"> Pricing </a> 
                </li> 
            </ul>


        </div>

        <div class ="jumbotron">

           <div class ='container'>
              <div id ='h1'>
               <h1> Need a website but don't know how? Look no further </h1> 
              </div>
              <p> Web engineer for hire

           </div>
        </div> 
        <div style='align:center;text-align:center' class ="des" >

             <h2> Knowledge. </h2> 
                 <p> Straight 'outta Compton </p> 
             <hr> 
             <h2> Commitment. </h2>
                 <p> To excellence and to serve </p>  
             <hr> 
             <h2> Perspective. </h2> 
                 <p> New outlook on your web designs </p> 
             <br> 
        </div> 
     </div> 
    </body> 




    <footer>
        <div id ='footer'>
            <p> Copyright @2014-2015  Jacob Platin 
        </div>
        <div id ='footer1'>
            <div id ='foot1'>
                <a href="https://twitter.com/TheJakeoShark"  target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png"  width="72" height="46" border="0" /></a>
            </div>
            <div id ='facebook'>
                <a href ='https://facebook.com/jacob.platin'  target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a> 
            </div>
        </div> 

    </footer>
</html>

CSS

.jumbotron {

    background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
    z-index: 110;
    position: relative;



}

.des {

  position: relative; 
  bottom: 1564px; 
  background-color: #e3e3e3;
  font-family: 'Georgia', sans-serif;
  text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
  box-shadow: 1px 5px 35px black;
  text-align: center; 
  width: 1050px; 
  height:1000px;
  position: relative;
  z-index: -1;
  margin: 0 auto;
}

.nav li {

    list-style-type: none; 
    text-align: center; 
    float: left; 
    width: 33.3%; 
    position: relative;
    z-index: 10;
    color: black; 
    padding-top: 12px;
    font-weight: 700; 
    font-size: 18px; 

}
.nav {

    background-color: #660000; 
    height: 65px;
    box-shadow: 2px 2px 8px 3px black; 
}
.nav a {

    text-decoration: none;
    color: black; 
    padding-top: 15px;
    font-weight: 700; 
    color: white;
}

.container > p {

    padding-top: 100px;
    height: 500px;
    position: relative;
    bottom: 140px; 
    font-weight: 700; 
    color: #cc0000; 
    text-align: center;
    font-family: 'Georgia', sans-serif; 
    text-shadow: 2px 3px 3px blue; 


}



.jumbotron  {

    background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);

    background-position: -10px -60px; 
    z-index: -1; 
    height: 1700px; 


}

#h1 {

    position: relative;
    top: -50px; 
    text-align: center;
    font-family: 'Georgia', times, serif;
    background-color: black; 
    color: #e3e3e3;
    text-shadow: 5px 5px 5px white; 
    height: 150px;
    width: auto;
    margin: 0;
    margin-left: 44px;
    margin-right:44px;

    position: relative;
    z-index: -1;
}

#master_wrapper{overflow:hidden!important;}
#footer {

    width: 2000px;
    height: 200px; 
    background-color: black; 
    box-shadow: 1px 1px 12px 4px black;
    position: relative;
    bottom: -100px;
}

#footer1 {

    height: 78px;
    width: 2000px;
    background-color: #660000; 
    position: relative;
    margin-top: 24px;

}

#footer > p {
    text-align: center; 
    font-family: 'Georgia', sans-serif;
    color: white;
    font-size: 18px; 
    padding-top: 24px; 
}

#foot1 {

    padding-top: 15px; 
    text-align: center;


}

#facebook {
    position: relative;
    bottom: 123px; 

    text-align: center;
}

.des > h2 {

    padding-top: 80px;
    color: #660000
}

#photo1 {

    background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
    width: 240px;
    height: 200px;
    position:relative;

}
.des > img {

    margin-top: 40px;
    box-shadow: 01px 01px 01px 5px black;
}

Answer 1

您 CSS 中的背景图片高度设置为 height: 1700px; 但您 link 的背景图片只有 1200 像素高。这似乎可以解释 500 像素的差异

Answer 2

当您使用 position: relative; 时，浏览器会认为，"Ok, I'm going to keep the element's technical location the same, but I'm going to make it appear to be in a different spot." 您的 .des 元素上有以下 CSS：

.des {
    position: relative;
    bottom: 1564px;
}

这表示，"Keep .des there, but make it appear 1564 pixels higher (further away from the original bottom)"。这会导致空白 space，这是元素的高度，显示在元素 技术上仍然是 的位置，即使它出现在其他地方。

您的 #footer 元素上还有以下 CSS：

#footer {
    position: relative;
    bottom: -100px;
}

这使得它在页面上看起来低了 100 像素，但保留了原来的位置，现在是空白。

除非我弄错了，否则这两个空白在您的页面上加起来高达 1038 像素的空白 space。解决方案？您可能正在寻找 position: absolute;，它没有保留元素的原始位置。事实上，我认为如果你将 .des 上的 CSS 的定位部分更改为

.des {
    position: absolute;
    top: 260px;
}

或接近于此的东西，它将消除大部分间隙，减去 #footer 上的 100px。这里有一个 JSFiddle，如果你想看的话。

页脚和背景图像之间的大白色 Space

Large White Space Between Footer and Background Image

html

css

whitespace