显示：当内容宽度大于外部 div 时的表格答案

【问题标题】：display:table when width of content is more then outer div显示：当内容宽度大于外部 div 时的表格
【发布时间】：2013-11-17 10:22:39
【问题描述】：

这很简单，但在谷歌搜索数小时后无法得到答案。我有包含标题 div 和内容 div 的外部 div。我已将内容 div 的高度设置为 100%，这样高度会随着外部 div 的增长而调整（外部 div 是用户可调整大小的）。我使用 display:table 作为外部 div 和 display:table-row 作为标题来实现这一点。现在的问题是，当我的内容 div 中的某些内容（动态）具有大于我的外部 div 的固定高度和宽度时，外部 div 的高度保持完美但是，宽度增加了。我不希望宽度增加，而是外部 div 的宽度应该保持不变并且应该出现滚动条（已经设置了属性 overflow:auto）。

这是小提琴http://jsfiddle.net/SudhirV/9nut9/

    <body>
        <div id="outerDiv">
            <div id="header">Header</div>
            <div id="content">
                <div style="width:550px; height:750px;"></div>
            </div>
        </div>
    </body>

    *
{
            font-family:Calibri;
            font-size:10pt;
            }
    #outerDiv
    {
        border:1px solid red;
        width:300px;
        height:400px;   
        display:table;      
    }
    #header
    {
        background-color:Gray;
        color:White;
        height:25px;
        vertical-align:middle;
        display:table-row;
        }
        #content
        {
            /*border:1px solid green;*/
            height:100%;
            overflow:auto;
            }

更新：我已经通过将内容 div 的宽度设置为继承来解决问题。

【问题讨论】：

标签： html css

【解决方案1】：

由于显示类型table 的宽度将始终缩放以适应内容，因此在这种情况下设置#outerDiv 的宽度是没有意义的。虽然您从不说以何种方式调整表格大小，但我建议不要在#outerDiv 上设置宽度，而是在#content 上更改宽度，如下所示：

fiddle

#content {
    width:300px;
}

【讨论】：