CSS div/overflow：为什么第一个 HTML 文件有效，而第二个无效？答案

【问题标题】：CSS div/overflow: Why does the first HTML file work but not the second?CSS div/overflow：为什么第一个 HTML 文件有效，而第二个无效？
【发布时间】：2011-02-02 14:01:21
【问题描述】：

当您水平调整浏览器大小时，请注意第一个 HTML/CSS 是如何工作的。它会缩小不超过 800 像素，但只要拖动浏览器的右边缘，它就会扩大。它还会正确溢出顶部的表格并水平滚动。

我不喜欢第一个代码 sn-p 的地方是滚动条所在的位置。我希望它显示在字段集的边界内，所以即使我将浏览器缩小到 800 像素宽，我也可以看到字段集边界的左侧和右侧。

第二个代码 sn-p 与第一个代码完全相同，只是我在字段集内部和网格周围添加了另一个 div 标签。请注意，当您使浏览器的视口变窄时，顶部字段集的宽度不会正确缩小。关于它为什么不起作用的任何想法，我可以做些什么来让它像第一个代码 sn-p 一样工作？

我觉得我描述的不是很清楚，但是如果您将两者并排运行，并扩展和收缩浏览器窗口的水平边缘，您会看到两者之间的差异。

我对 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>

【问题讨论】：

在我工作的地方，除了 Firefox 之外，我们还必须支持 IE 7（不是 8），所以恐怕我们会被 #width 解决方法所困。 ie6 根本不处理 min-width 设置。真可惜。

标签： html css html-table width overflow

【解决方案1】：

我希望这就是你的意思：

我已将overflow-x 和宽度规则移至#divTopFieldSet - 当正文变得太窄而无法包含表格时，div 的内容会正确滚动。

说实话，我不能 100% 确定其根本原因。当具有百分比宽度的元素设置为溢出：滚动时，它不会自动缩小以裁剪其内容 - 似乎元素的子元素发挥了作用。因为表格有自己的最小宽度（由单元格的内容决定），所以周围的容器不会缩小到表格的外边缘。最重要的是，还有百分比宽度的计算——width:99%; 表示“父容器宽度的 99%”——如果父容器不是基于视口的大小，那么 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>

如果这不是您需要的，请告诉我们...

【讨论】：

感谢您查看 Beejamin。我查看了第一个代码 sn-p 并将其与您的解决方案并排运行，它大致相同。根据您所说，听起来浏览器计算宽度的顺序与第二个代码 sn-p 没有正确利用溢出滚动机制有关。关于浏览器计算尺寸的顺序有什么想法吗？如果 body 是所有东西的父 div 并且容器 div 占据了该宽度的 90%，然后它从父到子不断下降，我希望溢出可以工作。