请注意当您水平调整浏览器大小时第一个 HTML/CSS 是如何工作的。它不会缩小超过 800 像素，但会随着您拖动浏览器的右边缘而扩展。它还会正确地溢出顶部的表格并水平滚动它。
我不喜欢第一个代码片段的地方是滚动条所在的位置。我希望它显示在字段集的边框内，因此即使我将浏览器缩小到 800 像素宽，我也可以看到字段集边框的左侧和右侧。
第二个代码片段与第一个代码片段完全相同，除了我在字段集内部和网格周围添加了另一个 div 标签。请注意，当您使浏览器的视口(viewport)变窄时，顶部字段集的宽度不会正确缩小。关于它为什么不起作用的任何想法，我可以做些什么来让它像第一个代码片段一样工作？
我认为我没有清楚地描述这一点，但如果您将两者并排运行，并扩展和收缩浏览器窗口的水平边缘，您将看到两者之间的差异。
我对 CSS 和 HTML 布局还很陌生，所以我对 CSS 在某些情况下处理大小的原因的理解仍然让我感到困惑。
工作 HTML 文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divMasterGrid {
position:relative;
margin:5px;
top:5px;
width:99%;
margin:0 auto;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divMasterGrid">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
损坏的 HTML 文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
position:relative;
width:99%;
margin:5px auto;
overflow-x:scroll;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
最佳答案
我希望这就是你的意思:
我已将 overflow-x 和宽度规则移至 #divTopFieldSet - 当正文变得太窄而无法容纳表格时，div 的内容会正确滚动。
老实说，我不是 100% 确定这个问题的根本原因。当具有百分比宽度的元素设置为 overflow:scroll 时，它不会自动收缩以裁剪其内容——看起来元素的子元素起到了一定作用。因为表格有它自己的最小宽度(由单元格的内容决定)，所以周围的容器不会收缩超过表格的外边缘。最重要的是，计算百分比宽度 - width:99%; 表示“父容器宽度的 99%” - 如果父容器不是基于视口(viewport)的大小，当您调整大小时，这 99% 也不会改变。
不过，将溢出规则应用到树的更上层的容器 (divTopFieldSet) 确实有效。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
margin:5px auto;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
如果这不是您需要的，请告诉我们...
关于html - CSS div/溢出 : Why does the first HTML file work but not the second?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2547230/