网页底部的空间很大

Question

i've made my first ever webpage for a college project and when it renders there is a huge space at the bottom of the page, from reading elsewhere i've determined this is because of the huge padding i've been using with all my elements, but is there a quick fix to remove this space? 我已经为大学项目制作了我的第一个网页，当它呈现时，页面底部有一个巨大的空间，从其他地方阅读我已经确定这是因为我一直在使用的所有我使用的巨大填充元素，但有一个快速解决方案来删除这个空间？ Or even a way to re-write it and have it all in the same place, thanks! 甚至可以重新编写它并将它们放在同一个地方，谢谢！

The code is as follows: 代码如下：

        <!DOCTYPE html>

<html>

<head>

<style>



body {background-image:url('bckground.png');}




p.menutext {
            padding-top:250px;
    text-align:center;

            position:relative;left:-55px;
            white-space:nowrap;
    }
p.jscript 
{
padding-left:250px;
position:relative;top:-25px;
}

p.topproducts
{
padding-left:222px;
position:relative;top:-120px;
 }



p.arrowborder
{
position:relative;top:-640px;
padding-left:175px;
}

p.deckthumb1
{
padding-left:210px;
position:relative;top:-699px;
}
p.deckthumb2
{
padding-left:408px;
position:relative;top:-970px;
}
p.deckthumb3
{
padding-left:605px;
position:relative;top:-1243px;
}
p.deckthumb4
{
padding-left:800px;
position:relative;top:-1516px;
}

p.info
{padding-left:300px;
position:relative;top:-1500px;
}


</style>



 <script language="JavaScript1.1">

 <!--





var slideimages=new Array()

var slidelinks=new Array()

function slideshowimages(){

for (i=0;i<slideshowimages.arguments.length;i++){

slideimages[i]=new Image()

slideimages[i].src=slideshowimages.arguments[i]

}

}



function slideshowlinks(){

for (i=0;i<slideshowlinks.arguments.length;i++)

slidelinks[i]=slideshowlinks.arguments[i]

}



function gotoshow(){

if (!window.winslide||winslide.closed)

winslide=window.open(slidelinks[whichlink])

else

winslide.location=slidelinks[whichlink]

winslide.focus()

}



//-->

</script>


</head>


<body>




<div id="mainside">
<p class="menutext">

<a href="Index.html"><img src="homebutton.png" border="0" alt="" 

width="80 height="50"/></a><a href="skateboards.html"><img 

src="skateboardsbutton.png"border="0" alt="" width="222 

height="65"/></a><a href="accessories.html"><img 

src="accessoriesbutton.png"border="0"alt=""width="215 

height="40"/></a><a href="help.html"><img src="helpbutton.png"border="0" 

alt="" width="100"height="59"/></a>
</p>
</div>




<p class="jscript">
<a href="javascript:gotoshow()"><img src="food1.jpg"
 name="slide" border=0 width=800 height=450></a>


<script>

<!--






slideshowimages

("slideshow1.png","slideshow2.png","slideshow3.png","slideshow4.png")

slideshowlinks
("skateboards.html","skateboards.html","skateboards.html","accessories.h

tml")



//configure the speed of the slideshow, in miliseconds
var 

slideshowspeed=2000



var whichlink=0

var whichimage=0

function slideit(){

if (!document.images)

return

document.images.slide.src=slideimages[whichimage].src

whichlink=whichimage

if (whichimage<slideimages.length-1)

whichimage++

else

whichimage=0

setTimeout("slideit()",slideshowspeed)

}

slideit()



//-->

</script>



</p>

<p class="topproducts">
<img src="topproducts.png" border="0" alt="" width="830 height="50"/>
</p>
<p class="arrowborder">
<img src="arrowborder.png" border="0" alt="" width="880" height="490"/>
</p>


<div id="mainside">
<p class="deckthumb1">
<img src="indexdeckthumb1.png" border="0" alt="" width="250" 

height="250"/>
</p>
<p class="deckthumb2">
<img src="indexdeckthumb2.png" border="0" alt="" width="250" 

height="250"/>
</p>
<p class="deckthumb3">
<img src="indexdeckthumb3.png" border="0" alt="" width="250" 

height="250"/>
</p>
<p class="deckthumb4">
<img src="indexdeckthumb4.png" border="0" alt="" width="250" 

height="250"/>
</p>

</div>


<div>
<p class="info">
<font face="herculanum" color="#518087" size="3">
CYCLONE <br>
Cyclone Skateboards <br>
Ltd. <br>
1 Holmes Street,<br>
Oxford  <br>
Oxfordshire, England,<br>
OX25 7PJ <br>
</font>
</p>
</div>



</body>

</html>

Answer 1

There is a quick way, but it's best to use a CSS inspecting tool such as firebug for Firefox browser, to find out exactly what's happening. 有一种快速方法，但最好使用CSS检查工具（例如Firefox浏览器的firebug）来确切了解发生了什么。

Then it's just a matter of deleting or modifying that particular CSS rule (firebug will show you which css file and line to change). 然后，只需删除或修改特定的CSS规则（firebug将向您显示要更改的css文件和行）。

Answer 2

The extra space comes from all the elements that you have moved using relative positioning. 额外的空间来自您使用相对定位移动的所有元素。

That way of moving elements only changes where they are displayed, they still take up space in their original position. 这种移动元素的方式只会改变它们显示的位置，它们仍占据原始位置的空间。

Use absolute positioning or negative margins to make elements overlap without accumulating space at the bottom of the page. 使用绝对定位或负边距使元素重叠而不会在页面底部累积空间。

You can use float:left to make elements line up beside each other. 您可以使用float:left来使元素彼此相邻排列。

Answer 3

Give padding-bottom:200px for the body or html. 给padding-bottom:200px的身体或HTML。

or 要么

Give margin-bottom:200px for the body or html. margin-bottom:200px的身体或HTML。

Answer 4

change css : 改变css：

p.info
{
padding-left:300px;
position:relative;
}

网页底部的空间很大

问题描述

4 个解决方案

解决方案1
1 2013-04-29 09:11:09

解决方案2
1 已采纳 2013-04-29 09:11:28

解决方案3
0 2013-04-29 09:10:16

解决方案4
0 2013-04-29 09:14:15

网页底部的空间很大

问题描述

4 个解决方案

解决方案1 1 2013-04-29 09:11:09

解决方案2 1 已采纳 2013-04-29 09:11:28

解决方案3 0 2013-04-29 09:10:16

解决方案4 0 2013-04-29 09:14:15

解决方案1
1 2013-04-29 09:11:09

解决方案2
1 已采纳 2013-04-29 09:11:28

解决方案3
0 2013-04-29 09:10:16

解决方案4
0 2013-04-29 09:14:15