IE 的 html/css div 定位问题

试图为此找到解决方案，但实际上什么也想不出来。以下是我想做的基础知识。

希望我的布局分为 3 个div，第 1 节是标题（徽标），第 2 节是水平菜单，第 3 节是根据您的菜单选择而变化的菜单特定内容。我希望没有浏览器滚动条，并且始终显示第 1 节和第 2 节，第 3 节延伸到浏览器窗口的底部，并且始终可见 scollbar。我会把我的代码放在最后，但它在 FF 中工作正常，但不能在 IE8 中工作。我读过你不能在同一个div中使用顶部和底部，但为什么不呢？它在 FF 中按预期工作得很好。我尝试过设置顶部并使用高度 100%，但由于我将顶部设置为 163，因此它将底部设置为窗口下方 163 像素。我希望第 3 部分随着窗口垂直扩展或收缩而增大和缩小。这是我简化的代码。我使用了内联样式来最大程度地减少处理多个文件的工作，并在测试时轻松使用。索引.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文档类型方面取得了一些成功，正在研究一个好的解决方案。但我在另一个例子中发现了这一点，同时继续寻找解决方案。我仍然不明白为什么你不应该在同一个div上使用TOP和BOTTOM，它们是两个非常不同的东西。

使用顶部和底部是不恰当的。仅仅因为它在 FF 中工作并不能使其正确。你试过吗：

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

我有一个使用不同文档类型的示例解决方案。我仍然不明白为什么人们说我不应该在同一个div上使用TOP和BOTTOM。对我来说，这就像说不要在同一div上使用边距顶部和边距底部一样。我不明白。

<!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>

您使用了错误的文档类型并且处于怪癖模式。请改用这个：<!DOCTYPE html>

你

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

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

试试这个

        <!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>

相关内容

最新更新

热门标签：