ie的html/css div定位问题_Html_Css

ie的html/css div定位问题

html css

ie的html/css div定位问题,html,css,Html,Css,我试图找到解决办法，但却什么都想不出来。以下是我想做的基本内容我想有3个分区，第一部分是标题（标志），第二部分是水平菜单，第三部分是菜单的具体内容，根据您的菜单选择的变化。我希望没有浏览器滚动条，第1节和第2节始终显示，第3节延伸到浏览器窗口的底部，并始终显示一个滚动条。我将把我的代码放在最后，但它在FF中运行良好，但在IE8中不行。我已经读到你不能在同一个div中使用top和bottom，但是为什么不能呢？它在FF中可以正常工作。我已经尝试过设置顶部并使用100%的高度，但由于我将顶部设置

我试图找到解决办法，但却什么都想不出来。以下是我想做的基本内容

我想有3个分区，第一部分是标题（标志），第二部分是水平菜单，第三部分是菜单的具体内容，根据您的菜单选择的变化。我希望没有浏览器滚动条，第1节和第2节始终显示，第3节延伸到浏览器窗口的底部，并始终显示一个滚动条。我将把我的代码放在最后，但它在FF中运行良好，但在IE8中不行。我已经读到你不能在同一个div中使用top和bottom，但是为什么不能呢？它在FF中可以正常工作。我已经尝试过设置顶部并使用100%的高度，但由于我将顶部设置为163，它将底部设置为窗口下方的163像素。我希望第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，它们是两个完全不同的东西。

使用TOP和BOTTOM是不合适的。仅仅因为它在FF中工作并不意味着它是正确的。您是否尝试过：

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

试试这个

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


测试垃圾
第一节
第二节
第三节

我有一个使用不同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>


测试垃圾
身体{
背景色：#99cc99；
保证金：0；
填充：0；
字体系列：Arial、Tahoma、Times；
字体：时代周刊；
字号：10pt；
溢出：隐藏；
宽度：100%；
身高：100%；
}
第一节
第二节
第3a节

第3b节

第3c节

第3d节

第3e节

第3f节

第3g节

第3h节

第3i节

第3j节

第3k节

第3l节

第3m节

第3n节

第3o节

第3p节

第3q节

第3r节

第3s节

第3t节

第3u节

第3v节

第3w节

第3x节

第3y节

第3z节

第3aa节

第3ab节

第3ac节

第3ad节

第3ae节

第3af节

第3ag节

第3ah节

第3ai节

第3aj节

第3ak节

第3al节

第3am节

第3节

第3节

第3节

第3节

第3节

第3节

第3节

第3节

您使用了错误的doctype，并且处于怪癖模式。改用这个：

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

此外，您还没有在CSS中提供单位。对于提供的任何值，都必须包括px、em或百分比。

好吧，我并不是说它在FF中工作的事实使它正确，但使用它们应该使它正确。“顶部”设置div的顶部，“底部”设置div的底部，为什么不允许它们位于同一个div中？我真的不明白这为什么不合适。我会试试那个填充技巧，看看它是怎么工作的。好吧，没用。它只是使底部的div非常大，这不是我想要的。我希望底部div从163px开始，并延伸到当前窗口的底部，如果用户调整窗口高度，则会自动展开和收缩。我知道我可以用jscript来做，但是我应该可以用CSS来做。谢谢你的回复。我试过了，它看起来和我试着将top设置为163，height设置为100%时做的基本相同，它将第3节div的其余部分挤出了可见窗口。我可能不得不用javascript来解决这个问题，但我希望我能用css来解决。同时使用顶部和底部是行不通的，Firefox正在使用它找到的第一个。这在每个浏览器中都能起作用的唯一方法是使用JavaScript。如果您使用jQuery，您可以将顶部设置为163px，然后将高度设置为文档高度-163px有时，当标记某些内容时，我们并不总是对此进行正确的调用。我已经复习了答案，它适合这个问题。如果它帮助您解决了问题，那么您可以通过单击左侧的复选框来接受答案。测试了您推荐的doctype，它似乎在FF和MSIE中都能正常工作。我会再检查一下，确保没有问题，但谢谢你。事实上，我的更新解决方案中有单元，所以这可能是我问题的一部分。很抱歉，我花了一段时间才回复，一点也没有查看此帖子。