2

我无法让自动高度适用于 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

4

2 回答 2

1

CSSheight默认值为auto. 正是height:100%on#paddingbox导致它<div>非常长，在 FF 和 Chrome 上创建了大面积的空白区域。删除它应该可以解决问题。

此外，您示例中的某些标记在 HTML 规范的较新版本中无效或已弃用。

例如width="100%"不是一个有效的属性。要应用内联样式，正确的语法是<div style="width:100%">

自 HTML 4.01 起，<center>标签和align="center"属性也已被弃用，在 HTML 5 中不存在，推荐的方法是使用 CSS 向标记添加表示方面，margin:0 auto例如text-align:center。请参阅为什么 HTML 中不推荐使用 <center> 标记？有关这方面的更多详细信息。由于问题中已经有一个样式表，它可能有助于分离内容（HTML）和演示文稿（CSS） - http://www.alistapart.com/articles/separationdilemma/

于 2012-09-13T13:38:22.153 回答
0

用body风格写这个：

position: absolute;
于 2013-03-10T05:46:54.670 回答