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

当您使用position: relative;时，浏览器会认为，＆＃34;好的，我会保持元素的技术位置不变，但我会去制作它似乎在一个不同的地方。＆＃34;您的.des元素上有以下CSS：

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

这样说，＆＃34;保持.des，但让它看起来高出1564像素（远离原始底部）＆＃34;。这会产生一个空白区域，即元素的高度，显示元素在技术上仍然是的位置，即使它出现在其他地方。

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

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

这使得它在页面上显示低100px，但保留原始位置，现在为空白。

除非我弄错了，否则这两个空白会在页面上合并1038px的空白区域。解决方案？您可能正在寻找position: absolute;，它不会保留元素的原始位置。事实上，我认为如果你将.des上的CSS的定位部分更改为

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

或接近它的东西，它会消除大部分差距，减去#footer上的100px。这是JSFiddle，如果您需要关注一下。

Answer 2

CSS中背景图片的高度设置为height: 1700px;，但您链接的背景图片仅为1200px高。这似乎可以解释500px的差异

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

2 个答案: