Html 带溢出的 DIV:auto 和 100% 宽的表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/139000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DIV with overflow:auto and a 100% wide table
提问by cetnar
I hope someone might be able to help me here. I've tried to simplify my example as best I can.
我希望有人能在这里帮助我。我已经尽力简化我的例子。
I have an absolutely positioned DIV, which for this example I've made fill the browser window. This div has the overflow:auto attribute to provide scroll bars when the content is too big for the DIV to display.
我有一个绝对定位的 DIV，在这个例子中我已经填充了浏览器窗口。这个 div 有 overflow:auto 属性，当内容太大而 DIV 无法显示时提供滚动条。
Within the DIV I have a table to present some data, and it's width is 100%.
在 DIV 中，我有一个表格来展示一些数据，它的宽度是 100%。
When the content becomes too large vertically, I expect the vertical scroll bar to appear and the table to shrink horizontally slightly to accommodate the scroll bar. However in IE7 what happens is the horizontal scroll bar also appears, despite there still being enough space horizontally for all the content in the div.
当内容在垂直方向变得太大时，我希望出现垂直滚动条，并且表格会稍微水平收缩以适应滚动条。然而，在 IE7 中，水平滚动条也会出现，尽管 div 中的所有内容仍然有足够的水平空间。
This is IE specific - firefox works perfectly.
这是特定于 IE 的 - firefox 完美运行。
Full source below. Any help greatly appreciated.
完整来源如下。非常感谢任何帮助。
Tony
托尼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Table sizing bug?</title>
<style>
#maxsize
{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border: 5px solid silver;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="maxsize">
<p>This will be fine until such time as the vertical size forces a
vertical scroll bar. At this point I'd expect the table to re-size
to now take into account of the new vertical scroll bar. Instead,
IE7 keeps the table the full size and introduces a horizontal
scroll bar.
</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
</tr>
</tbody>
</table>
<p>Resize the browser window vertically so this content doesn't
fit any more</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
</div>
</form>
</body>
</html>
added 03/16/10...thought it might be interesting to point out that GWT's source code points to this question in a comment... http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack%20to%20account%20for%20the%22%20scrollpanel&sa=N&cd=1&ct=rc&l=48
添加 03/16/10...认为指出 GWT 的源代码在评论中指向这个问题可能会很有趣... http://www.google.com/codesearch/p?hl=en#MTQ26449crI /com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack%20to%20account%20for%20the%22%20scrollpanel&sa=N&cd=1&ct=rc&l=48
回答by cetnar
I had a problem with excessive horizonal bar in IE7. I've used D Carter's solution slighty changed
我在 IE7 中遇到了过多水平条的问题。我使用过 D Carter 的解决方案略有改变
<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%"...
...
</table>
</div>
</div>
To work in IE browser lesser than 7 you need add:
要在小于 7 的 IE 浏览器中工作，您需要添加：
<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
回答by Joel Webber
Eran Galperin's solution fails to account for the fact that simply turning off horizontal scrolling will still allow the table to underlap the vertical scrollbar. I assume this is because IE is calculating the meaning of "100%" before deciding that it needs a vertical scrollbar, then failing to re-adjust for the remaining horizontal space available.
Eran Galperin 的解决方案未能解释这样一个事实，即简单地关闭水平滚动仍将允许表格与垂直滚动条重叠。我认为这是因为 IE 在决定它需要垂直滚动条之前正在计算“100%”的含义，然后未能重新调整剩余的可用水平空间。
cetnar's solution above nails it, though:
不过，上面 cetnar 的解决方案可以解决这个问题：
<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%">
...
</table>
</div>
</div>
This works properly on IE6 and 7 in my tests. From what I can tell, the "" hack doesn't appear to actually be necessary on IE6.
这在我的测试中在 IE6 和 7 上正常工作。据我所知，"" hack 在 IE6 上似乎并不是必需的。
回答by Eran Galperin
Change:
改变：
overflow: auto;
to:
到：
overflow-y:hidden;
overflow-x:auto;
回答by Eran Galperin
Okay, this one plagued me for a LONG time. I have made far too many designs that have extra padding on the right, allowing for IEs complete disregard for their own scrollbar.
好吧，这个问题困扰了我很长时间。我做了太多在右边有额外填充的设计，允许 IE 完全无视他们自己的滚动条。
The answer is: nest two divs, give them both hasLayout, set the inner one to overflow.
答案是：嵌套两个div，给它们都hasLayout，设置里面的一个溢出。
<!-- zoom: 1 is a proprietary IE property. It doesn't really do anything here, except give hasLayout -->
<div style="zoom: 1;">
<div style="zoom: 1; overflow: auto">
<table style="width: 100%"...
...
</table>
</div>
</div>
http://www.satzansatz.de/cssd/onhavinglayout.html
Go there to read more about having layout
http://www.satzansatz.de/cssd/onhavelayout.html
去那里阅读更多关于布局的信息
回答by Robert Munteanu
This is reported fixed in GWT trunk.
回答by Steve Tchorzewski
If it's the body tag that insists on having the horizontal scroll (I guess because I have child elements set to 100%) you can add this to your CSS to fix the problem in IE7 (or 8 compatibility mode):
如果是 body 标签坚持要水平滚动（我猜是因为我将子元素设置为 100%），您可以将其添加到 CSS 中以解决 IE7（或 8 兼容模式）中的问题：
html{overflow-x:hidden;}
回答by Jeromy Irvine
Unfortunately, this is a quirk of IE. There's no way using pure XHTML and CSS to get it to work the same as Firefox.
不幸的是，这是 IE 的一个怪癖。没有办法使用纯 XHTML 和 CSS 让它像 Firefox 一样工作。
You could do it using JavaScript to detect the size of the window and set the width of the table dynamically. I can add more detail on that if you really wanted to go that route.
您可以使用 JavaScript 来检测窗口的大小并动态设置表格的宽度。如果你真的想走那条路，我可以添加更多细节。
回答by Patcouch22
This looks like it should fix your problem, as long as you are not apposed to condition statements. Fixing IE overflow
只要您不使用条件语句，这看起来应该可以解决您的问题。 修复 IE 溢出
