1

试图为此找到解决方案，但无法真正想出任何办法。这是我想做的基础知识。

想让我的布局在 3 个 div 中，第 1 部分是标题（徽标），第 2 部分是水平菜单，第 3 部分是根据您的菜单选择更改的菜单特定内容。我希望没有浏览器滚动条，并且始终显示第 1 节和第 2 节，第 3 节延伸到浏览器窗口的底部，并且始终可见 scollbar。我会把我的代码放在最后，但它在 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，它们是两个非常不同的东西。

4

4 回答 4

0

使用顶部和底部是不合适的。仅仅因为它在 FF 中有效并不能使它正确。你有没有尝试过：

padding-bottom: 1000em;
margin-bottom: -1000em;
于 2012-04-09T17:49:45.890 回答
0

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

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

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

于 2012-04-14T02:14:50.050 回答
0

我有一个使用不同文档类型的示例解决方案。我仍然不明白为什么人们说我不应该在同一个 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>
于 2012-04-10T22:19:04.833 回答
-1

尝试这个

        <!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>
于 2012-04-09T19:13:14.593 回答