Question

曾试图找到解决办法,而且确实可以提出任何东西。这里符合我所希望做的基本内容。

Would like to have my layout in 3 divs, section 1 is a header (logo), section 2 is a horizontal menu, section 3 is the menu specific content that changes based on your menu selection. I would like for there to be no browser scroll bar, and for section 1 and 2 to always appear, with section 3 extending to the bottom of the browser window with an scollbar always visible. I ll put my code at the end, but it works fine in FF, but not IE8. I have read that you can t use top and bottom in the same div, but why not? it works as intended in FF just fine. I ve tried setting top and using height 100%, but since I m setting the top at 163, it puts the bottom at 163 px below the window. I want section 3 to grow and shrink as the window expands or shrinks vertically. Here s my much simplified code. I ve used inline styles to minimize working with multiple files and for ease while testing. index.css is inconsequential in this context.

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

UPDATE: Im利用xhtml doc类型取得了一些成功,致力于找到一个好的解决方案。但我发现,这是另一个例子,同时我继续长期寻求解决办法。我仍真的不了解你为什么不能在同一批次中使用联塔办事处和BOTTOM,它们是两个截然不同的东西。

Answer 1

我利用不同的理论类型,找到一个样本解决办法。我仍然不理解为什么有人说,我不应该在同一批次中使用联塔办事处和BOTTOM。对我来说,与 saying一样,不在同一干线上使用边远和边底。我拿不到。

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

使用上下层和下层是不适当的。仅仅因为它在FF中工作,就没有纠正。您:

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

Answer 3

你们正在使用错误的手法类型,并处于qui状态。改用:<! DOCTYPE html>

你说,你开始使用X超声波照像,这就是为什么要更好地为你工作,使你摆脱qui。然而,由于我确信你不担任X超标,你不应使用这一标记。

另外,你没有在社会保障局提供单位。您的消费价值包括所供应的 p或 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>

友情链接