html - 我的网页结束了，但滚动还在继续

Question

我为一项作业开发了一个简单的网页。一切都很好，但在我的页面几乎结束的地方，我的意思是在内容的最后一行，滚动条一直持续到我页面长度的近 70% 到底部，除了背景之外没有任何可见的东西。我添加了会导致这种情况的东西吗？你有什么建议吗？

这是CSS代码:

#wrapper {
    margin-left:auto;
    margin-right:auto;
    overflow-x: hidden;
}
/** background CSS **/
body{
    background-image:url('bg.png');

}
#header{
    position:relative;
    left:23%;
}

#menu{
    position: relative;
    top:-5px;
    left:24.2%;
    word-spacing:60px;
}

#list1{
    display: inline;
    border: 0px solid #000000;
    font-family: Tahoma, Arial Black;
    font-size:25px;
    padding:6px;
    border-radius: 3px 3px;
    background-color: #cc0300;
    color: #ffffff;


    }

a{
    text-decoration: none;
}

#list1:hover {
    background-color: #ffffff;
    color: #000000;

}

#news{  
    position:relative;
    left:25%;
}


#whtspc{
    position:relative;
    right:41px;
    top:70px;
    border: 0px solid #000000;
    border-radius: 15px 15px;

}
/** background CSS **/

/** header for content section **/
#shead{
    position:relative;
    top:-1490px;
    font-size:30px;
    font-family: Tahoma, Arial Black;
    color:#ffffff;

}
#n{
    border: 0px solid #000000;
    border-radius: 3px 3px;
    background-color: #ff6600;
    padding: 6px;
}
/** header for content section **/

/** content **/

#h1{
    position:relative;
    top:-1480px;
    font-size:20px;
    font-family: Tahoma, Arial Black;
    color:#000000;
}

#goty{
    position:relative;
    height:200px;
    width:240px;
    float:left;
    top:-1480px;
    border: 0px solid #000000;
    border-radius:3px 3px;
}
#c1{
    position:relative;
    top:-1470px;
    left:10px;
    font-size:15px;
    font-family: Tahoma, Arial Black;
    color:#000000;
}
table{
    position:relative;
    top:-1460px;
    left:10px;
    font-size:15px;
    font-family: Tahoma, Arial Black;
    color:#000000;
    background-color:black;
    width:30%;
    border-radius: 3px 3px;
}
#tr1{
    background-color: #ff6600;
}
#tr2{
    background-color: #ff6600;
    color:#ffffff;
}

#hr1{
    position:relative;
    top:-1440px;
    float:left;
    left:150px;
    }

#h2{
    position:relative;
    top:-1386px;
    left:-608px;
    font-size:20px;
    font-family: Tahoma, Arial Black;
    color:#000000;
}

#cons{
    position:relative;
    float:left;
    top:-1365px;
    border: 0px solid #000000;
    border-radius:3px 3px;
}


#c2{    
    position:relative;
    top:-1355px;
    left:10px;
    font-size:15px;
    font-family: Tahoma, Arial Black;
    color:#000000;
}

#hr2{
    position:relative;
    top:-1310px;
    left:-482px;
}
#h3{
    position:relative;
    top:-1296px;
    font-size:20px;
    font-family: Tahoma, Arial Black;
    color:#000000;
}
#oc{
    position:relative;
    float:left;
    top:-1265px;
    border: 0px solid #000000;
    border-radius:3px 3px;
}

#c3{
    position:relative;
    top:-1265px;
    left:10px;
    font-size:15px;
    font-family: Tahoma, Arial Black;
    color:#000000;
}

#hr3{
    position:relative;
    top:-1270px;
    left:-485px;
}

Answer 1

这是因为您正在使用 position:relative 并奇怪地将所有元素移出屏幕。我不知道你为什么要这样做，但如果你杀死所有这些属性，你可以看到内容很好地填充了页面

JSFIDDLE