Question

试图为此寻找解决方案，并不能真正想出任何东西。这是我想要做的基础知识。

我希望我的布局分为3个div，第1部分是标题（logo），第2部分是水平菜单，第3部分是根据菜单选择更改的菜单特定内容。我希望没有浏览器滚动条，并且第1和第2部分始终显示，第3部分延伸到浏览器窗口的底部，并且scollbar始终可见。我会把我的代码放在最后，但它在FF中工作正常，但不是IE8。我已经读过你不能在同一个div中使用top和bottom，但为什么不呢？它在FF中的预期效果很好。我已经尝试设置顶部并使用高度100％，但由于我将顶部设置为163，因此底部位于窗口下方163 px处。当窗口垂直扩展或缩小时，我希望第3节增长和缩小。这是我简化的代码。我使用内联样式来最小化处理多个文件，并在测试时轻松。 index.css在这方面是无关紧要的。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Test Junk</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>

  <body>
<div style="background-color:#cccea2; text-align:center;height:136">
    section 1
</div>
<div style="background-color:#ccace2; text-align:center;height:27">
    section 2
</div>
<div style="background-color:#225522;     text-align:center;position:absolute;top:163;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden;">
section 3    
</div>
</body>
</html>

更新：我在使用xhtml doctype方面取得了一些成功，正在努力寻找一个好的解决方案。但我在另一个例子中发现了这一点，同时继续寻找解决方案。我仍然真的不明白为什么你不应该在同一个div上使用TOP和BOTTOM，它们是两个截然不同的东西。

Answer 1

使用顶部和底部是不合适的。仅仅因为它在FF中工作并不能使它正确。你试过了吗？

padding-bottom: 1000em;
margin-bottom: -1000em;

Answer 2

我有一个使用不同doctype的示例解决方案。我仍然不明白为什么人们说我不应该在同一个div上使用TOP和BOTTOM。对我来说，就像说不在同一个div上使用margin-top和margin-bottom一样。我不明白。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Test Junk</title>
  </head>
<style>
body {
    background-color:#99cc99;
    margin:0;
    padding:0;
    font-family: Arial, Tahoma, Times;
    font: Times;
    font-size: 10pt;
    overflow:hidden;
    width:100%;
    height:100%;
}
</style>
  <body>
<div style="background-color:#cccea2;width:100%;text-align:center;height:136px;">
    section 1
</div>
<div style="background-color:#ccace2; position:absolute;top:136px;width:100%;text-align:center;height:27px;">
    section 2
</div>
<div style="background-color:#225522; text-align:center;position:absolute;top:163px;bottom:0px;width:100%;overflow-y:scroll;overflow-x:hidden;">
section 3a <br>   
section 3b <br>   
section 3c <br>   
section 3d <br>   
section 3e <br>   
section 3f <br>   
section 3g <br>   
section 3h <br>   
section 3i <br>   
section 3j <br>   
section 3k <br>   
section 3l <br>   
section 3m <br>   
section 3n <br>   
section 3o <br>   
section 3p <br>   
section 3q <br>   
section 3r <br>  
section 3s <br>   
section 3t <br>   
section 3u <br>   
section 3v <br> 
section 3w <br>   
section 3x <br>   
section 3y <br>   
section 3z <br>   
section 3aa <br>   
section 3ab <br>   
section 3ac <br>   
section 3ad <br>  
section 3ae <br>   
section 3af <br>   
section 3ag <br>   
section 3ah <br>   
section 3ai <br>   
section 3aj <br>   
section 3ak <br>   
section 3al <br>   
section 3am <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
</div>
  </body>
</html>

Answer 3

您使用的是错误的doctype并处于怪癖模式。请改用此<!DOCTYPE html>

你说你开始使用XHTML文档类型，这就是为什么它更适合你，因为它让你摆脱了怪癖。但是，您不应该使用那个，因为我确定您没有提供XHTML标记。

此外，您还没有在CSS中提供单位。您必须为所提供的任何值包含px或em或百分比。

Answer 4

试试这个

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <meta content="text/html; charset=ISO-8859-1"
          http-equiv="Content-Type">
        <title>Test Junk</title>
        <link rel="stylesheet" type="text/css" href="index.css">
      </head>

      <body>
    <div style="background-color:#cccea2; text-align:center;height:136">
        section 1
    </div>
    <div style="background-color:#ccace2; text-align:center;height:27">
        section 2
    </div>
    <div style="background-color:#225522;text-align:center;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden; height:100%;">
    section 3    
    </div>
    </body>
    </html>

html / css div与ie的定位问题

4 个答案: