如何摆脱页面底部的开放空间？

我一直在做一个小项目，并且遇到了问题。当我在浏览器中查看我的网站时，所有内容的底部都有一个非常大的开放空间。任何人都可以帮我找出问题所在吗？我一直在努力寻找它几个小时。如何摆脱页面底部的开放空间？

下面的代码：

<html> 
<head> 
<title>Media Mash - Home</title> 
<style type="text/css"> 
* { 
font-family:neuropol; 
color:rgb(255,255,255); 
} 
body { 
background-color:rgb(52,126,153); 
} 
.text1 { 
font-size:20; 
color:rgb(0,0,0); 
} 
.text2 { 
font-size:35; 
text-decoration:none; 
margin-left:4%; 
margin-right:4%; 
} 
.parent { 
min-width:1255px; 
} 
.topBar { 
background-color:rgb(161,35,35); 
display:inline-block; 
width:1247px; 
text-align:center; 
height:40px; 
} 
.leftBar { 
top:8px; 
background-color:rgb(161,35,35); 
position:relative; 
display:inline-block; 
width:250px; 
text-align:center; 
height:581px 
} 
.main { 
background-color:rgb(161,35,35); 
position:relative; 
display:inline-block; 
left:258px; 
bottom:573px; 
width:989px; 
height:581px; 
} 
.imageLeft { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.imageRight { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.textLeft { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.textRight { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.copyright { 
background-color:rgb(161,35,35); 
position:relative; 
display:inline-block; 
height:32px; 
bottom:565px; 
width:1247px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="topBar"> 
     <a class="text2" href="placeholder.html">Media Mash</a> 
     <a class="text2" href="placeholder.html">Film</a> 
     <a class="text2" href="placeholder.html">Music</a> 
     <a class="text2" href="placeholder.html">Games</a> 
     <a class="text2" href="placeholder.html">Books</a> 
    </div> 
    <br/> 
    <div class="leftBar"> 
     <a class="text1"> 
      Media Mash is a website dedicated to helping you realise what favourite films, songs, games and books are. 
      <br/> 
      <br/> 
      We do so in a fun image versus image format, which allows you to pick out your favourites. 
      <br/> 
      <br/> 
      Have a go and create your top 10 lists today! 
     </a> 
    </div> 
    <br/> 
    <div class="main"> 
     <div class="imageLeft"> 
      <img src="images\The Avengers MM.jpg"/> 
     </div> 
     <div class="imageRight"> 
      <img src="images\Star Wars V The Empire Strikes Back MM.jpg"/> 
     </div> 
     <br/> 
     <div class="textLeft"> 
      <a class="text1">The Avengers</a> 
     </div> 
     <div class="textRight"> 
      <a class="text1">Star Wars V: The Empire Strikes Back</a> 
     </div> 
    </div> 
    <br/> 
    <div class="copyright"> 
     <a class="text1">Copyrighted intellectual property of Thomas Crowther ©</a> 
    </div> 
</div> 
</body> 
</html>

来源

2012-05-20 Thomas Crowther

没有问题。你怎么能期望没有固定的高度是你手动定义你的CSS的高度？ –

我会建议不要使用“固定”高度和位置。你宁愿使用显示和浮动。你也应该尽量不要让你的页面高于1000px，而应该使用1000px的包装并将它与边距居中：0 auto; 而Blowski则表示安装Firebug，或Firefox开发者插件，否则Opera/Safari/GoogleChrome集成了其中的工具... – HamZa

当你的代码表示，浏览器首先与框渲染页面对方的下部，然后移动框出现在另一个的权利。这就是相对定位的意思。

你想要什么做的是，而是采用相对定位，使用float:left（上.leftBar）和float:right（上`.rightBar）。浏览器将开始渲染元素。

我建议你阅读CSS中的'盒子模型'，并查看Firefox的Firebug。

来源

2012-05-20 21:26:09

谢谢。那很棒。 –

如何摆脱页面底部的开放空间？

回答

相关问题