gpt4 book ai didi

html - 溢出的 DIV :auto and a 100% wide table

转载 作者:技术小花猫 更新时间:2023-10-29 11:44:23 25 4
gpt4 key购买 nike

我希望有人能在这里帮助我。我已尽力简化示例。

我有一个绝对定位的 DIV,在本例中我已将其填满浏览器窗口。这个 div 有 overflow:auto 属性,当内容太大以至于 DIV 无法显示时提供滚动条。

在 DIV 中,我有一个表格来显示一些数据,它的宽度是 100%。

当内容在垂直方向上变得太大时,我希望出现垂直滚动条并且表格在水平方向上稍微收缩以容纳滚动条。然而在 IE7 中,尽管 div 中的所有内容仍有足够的水平空间,水平滚动条也会出现。

这是 IE 特有的 - firefox 完美运行。

完整来源如下。非常感谢任何帮助。

托尼

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

添加 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

最佳答案

我在 IE7 中遇到过多水平条的问题。我使用了 D Carter 的解决方案,稍微改变了一下

<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%"...
...
</table>
</div>
</div>

要在低于 7 的 IE 浏览器中工作,您需要添加:

<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->

关于html - 溢出的 DIV :auto and a 100% wide table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/139000/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com