height:100%问题在IE7中，在FF中没有
我想显示一个没有滚动条的页面（高度：100%）。我已阅读将此参数添加到 html 和 body 的建议。但它并不像我预期的那样工作。在 FF 中我确实没有看到滚动条。但在 IE7 和 8（标准模式）中，有一个滚动条。在 Quirks 模式下，它按预期工作。请看一下这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://apptools.com/examples/tables/standardscss.html -->
<html><head><title>standards compliance mode with css rendering</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=content-type>
<meta content=no http-equiv=imagetoolbar>
<meta name=mssmarttagspreventparsing content=true>
<style type=text/css>body {
padding-bottom: 0px; background-color: #fff; margin: 0px; padding-left: 0px; padding-right: 0px; color: #000; padding-top: 0px
}
table {
border-bottom: #008 1px solid; border-left: #008 1px solid; border-top: #008 1px solid; border-right: #008 1px solid
}
html {
height: 100%
}
body {
height: 100%
}
.fullheight {
height:100%
}
</style>
<meta name=generator content="mshtml 8.00.6001.18876"></head>
<body>
<table width=450 bgcolor=#ccccff align=center height="100%">
<tbody>
<tr>
<td colspan="2" height="200px">
<p>paragraph</p>
</td></tr>
<tr class="fullheight"><td >
<p>paragraph</p>
</td>
<td>
<p>paragraph</p>
</td>
</tr>
</tbody></table></body></html>
I want to display a page with no scrollbar (height:100%). I have read suggestions to add this argument to html and body. But it does not work as I expect. In FF indeed I do not see a scrollbar. But in IE7 and 8 (Standards mode) there is a scrollbar. In Quirks mode it works as expected. Please take a look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://apptools.com/examples/tables/standardscss.html -->
<html><head><title>standards compliance mode with css rendering</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=content-type>
<meta content=no http-equiv=imagetoolbar>
<meta name=mssmarttagspreventparsing content=true>
<style type=text/css>body {
padding-bottom: 0px; background-color: #fff; margin: 0px; padding-left: 0px; padding-right: 0px; color: #000; padding-top: 0px
}
table {
border-bottom: #008 1px solid; border-left: #008 1px solid; border-top: #008 1px solid; border-right: #008 1px solid
}
html {
height: 100%
}
body {
height: 100%
}
.fullheight {
height:100%
}
</style>
<meta name=generator content="mshtml 8.00.6001.18876"></head>
<body>
<table width=450 bgcolor=#ccccff align=center height="100%">
<tbody>
<tr>
<td colspan="2" height="200px">
<p>paragraph</p>
</td></tr>
<tr class="fullheight"><td >
<p>paragraph</p>
</td>
<td>
<p>paragraph</p>
</td>
</tr>
</tbody></table></body></html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
嗯......你所问的问题可能会涉及复杂的领域，但我会从消除代码中的不一致开始。例如：
在一个里面code>所以你告诉代码 100% + 200px = 100%。这在逻辑上是失败的，尽管有时您可能想以这种方式破解您的代码。
首先，尝试调整属性，使它们能够逻辑地工作，并尝试将代码简化到更加简单，然后从那里开始工作。之后，如果滚动条仍然出现，您可能需要开始调整负边距。这将与您的代码变得如此“亲密”，坦率地说，任何为您提供建议的人都需要清楚地了解您的目标，而不是就单个代码元素提供建议。
Umm... what you're asking can get into complicated territory, but I'd start with eliminating inconsistencies in your code. For example:
<td>inside one<tr><tr>So you're telling the code that 100% + 200px = 100%. That fails logically, although you might want to hack your code that way sometimes.
First, try adjusting the properties so that they work logically and try to reduce your code to greater simplicity, and then work your way up from there. After that, if a scrollbar still appears, you'll probably need to start tweaking with negative margins. This will get so "intimate" with your code that frankly anyone advising you would need a clear sense of your objectives, rather than advising on individual code elements.
如果问题出在滚动条上，您可以使用 CSS“溢出”属性来强制执行以下行为：
它在元素的框外呈现。
这是默认的；
其余的内容将是
无形的;
添加滚动条以查看其余部分
内容；
应添加滚动条以查看
其余内容。
If the problem is the scrollbar, you can use the CSS "overflow" attribute in order to force the behavior:
It renders outside the element's box.
This is default;
the rest of the content will be
invisible;
a scroll-bar is added to see the rest
of the content;
scroll-bar should be added to see the
rest of the content.