Question

这个很简单，但谷歌搜索几个小时后无法得到答案。我有外部div包含一个标题div和内容div。我已将内容div的高度设置为100％，以便在外部div增长时调整高度（外部div可由用户调整大小）。我使用display实现了这一点：table for outer div和display：table-row for header。现在问题是当我的内容div中的一些内容（动态）具有大于我的外部div的固定高度和宽度时，外部div的高度保持完美但是，宽度增加。我不希望宽度增加，而外部div的宽度应该保持不变，滚动条应该出现（已经有属性溢出：自动设置）。

这是小提琴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的宽度设置为继承来解决问题。

Answer 1

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

fiddle

#content {
    width:300px;
}

display：table当内容的宽度大于外部div时

1 个答案: