gpt4 book ai didi

html - 显示 :table when width of content is more then outer div

转载 作者:行者123 更新时间:2023-11-28 03:27:52 24 4
gpt4 key购买 nike

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

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

最佳答案

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

fiddle

#content {
width:300px;
}

关于html - 显示 :table when width of content is more then outer div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20029571/

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