我无法获得用于FF或Chrome的自动高度。它在IE中运行良好,但在FF和Chrome中,它基本上使div的高度与页面本身一样高,即使内容没有填充元素。它只会在实际内容下留下一个巨大的空白区域。
<center>
<div id = "choosearea">
<div id = "logbar">
<div id = "logbartext">Choose Your Area
</div>
<div id = "log">
<a href = "?action=home">Home</a>
<a href = "?action=logout&NOHEADERS=1">Log Out</a>
</div>
</div>
<div id = "header">
<div id = "ss_logo">
<img src="http://i1157.photobucket.com/albums/p595/Gamethefirst/ssnewbanner1.png">
</div>
<div id = "area">Serving:<br><u>SouthWest Ohio<br>Northern Kentucky<br>SouthEast Indiana</u>
</div>
</div>
<center>
<div id = "menu">
</div>
</center>
<div width = "100%" align = "center">
<div id = "paddingbox">
<div id = "chooseareatext">
<p>Choose the area which you reside from the options below in order to post/view your ad.</p>
<ul class = "bullets">
<li><a href = "?board=swohio">SouthWest Ohio</a></li>
<li><a href = "?board=nk">Northern Kentucky</a></li>
<li><a href = "?board=indi">SouthEast Indiana</a></li>
</ul>
</div>
<div id = "affs">
<h3>Need Supplies? Get Great Deals From Our Friends!</h3>
</div>
</div>
</div>
</div>
</center>
样式表
#choosearea {
height: auto;
}
以下是一个示例:http://skillswap.boards.net/index.cgi?board=postad
CSS height
默认值为auto
。正是#paddingbox
上的height:100%
导致<div>
非常长,在FF和Chrome上产生了大面积的空白。删除它应该可以解决问题。
此外,示例中的某些标记在较新版本的HTML规范中无效或不推荐使用。
例如,width="100%"
不是有效的属性。要应用内联样式,正确的语法是<div style="width:100%">
<center>
标记和align="center"
属性自HTML 4.01以来也一直被弃用,并且在HTML 5中不存在,相反,推荐的方法是使用CSS向标记添加表示方面,例如margin:0 auto
和text-align:center
。请参阅为什么<居中>标记在HTML中已弃用?了解更多详细信息。由于问题中已经存在样式表,因此将内容(HTML)和表示(CSS)分离可能会有所帮助http://www.alistapart.com/articles/separationdilemma/
用body样式写这个:
position: absolute;