html/css div定位问题，例如

已经试图找到解决方案，并且不能真正想出任何东西。以下是我想要做的基础知识。html/css div定位问题，例如

想要我的布局在3个div中，第1部分是标题（徽标），第2部分是水平菜单，第3部分是根据菜单选项改变的菜单特定内容。我希望没有浏览器滚动条，并且第1部分和第2部分总是出现，第3部分延伸到浏览器窗口的底部，并且始终可见scollbar。我会把我的代码放在最后，但它在FF中运行正常，但不是IE8。我已经读过，你不能在同一个div中使用顶部和底部，但为什么不呢？它在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文档类型方面取得了一些成功，致力于一个好的解决方案。但我在另一个例子中发现了这一点，同时继续寻找解决方案。我仍然不明白为什么你不应该在同一个div上使用TOP和BOTTOM，它们是两个完全不同的东西。

来源

2012-04-09 Joe

同时使用顶部和底部不起作用，Firefox正在使用它找到的第一个。这将在每个浏览器中工作的唯一方法是使用JavaScript。如果你使用jQuery，你可以将顶部设置为163像素，然后将高度设置为文档高度 - 163px – aurbano 2012-04-09 17:48:19

我得使用不同的文档类型的样品溶液。我仍然不明白为什么人们说我不应该在同一个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-10 22:19:04 Joe

有时，当某些事情被标记时，我们并不总是对此做出正确的呼叫。我已经回顾了答案，它适合于这个问题。如果它帮助你解决问题，那么你可以通过点击左边的检查来接受答案。 – casperOne 2012-04-14 12:25:27

使用顶部和底部不正确。仅仅因为它在FF中的工作并不能使它正确。您是否尝试过：

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

来源

2012-04-09 17:49:45

嗯，我并不是说它在FF中工作的事实使它正确，但是使用他们应该使其正确。 “顶部”设置div的顶部，“底部”设置div的底部，为什么他们不应该被允许在同一个div？我真的不明白为什么这是不合适的。我会尝试填充技巧，看看它是如何工作的。 – Joe 2012-04-09 20:28:21

好的，没有工作。它只是让底部div非常大，这不是我想要的。我希望我的底部div从163px开始，并延伸到当前窗口的底部，并在用户调整窗口高度时自动展开和缩小。我知道我可以用jscript做，但我应该可以用CSS做到这一点。 – Joe 2012-04-09 20:32:31

-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-09 19:13:14 srini

感谢您的回复。试过了，它看起来好像和我在尝试将顶部设置为163并将高度设置为100％时所做的基本相同，它会将第3部分的其余部分推出可见窗口。我可能必须用javascript解决这个问题，但希望我可以用css来完成。 – Joe 2012-04-09 22:04:08

您正在使用错误的文档类型，并处于怪癖模式。请使用下面的代码：<!DOCTYPE html>

你说你开始使用XHTML文档类型，这就是为什么它更适合你的原因，因为它会让你走出怪圈。然而，你不应该使用那个，因为我确定你没有提供XHTML标记。

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

来源

2012-04-14 02:14:50 Rob

经过测试，您推荐的文档类型，它似乎在FF和MSIE中都符合我的要求。我会再检查一下，确保没有问题，但谢谢你。我的更新解决方案中实际上有单位，所以这可能是我的问题的一部分。对不起，我花了一段时间回应，没有检查这个帖子。 – Joe 2012-05-06 19:34:15

html/css div定位问题，例如

回答

相关问题