Question

我正在尝试使用HTML5 / CSS3创建容器div元素，根据以下规则将其大小调整为其内容：

如果内容的宽度>最大宽度将显示水平滚动条
如果内容的高度>容器的最大高度将显示垂直滚动条
如果内容水平或垂直适合滚动条将不会显示

到目前为止，我有这个http://jsfiddle.net/Bikram/73e7atqm/但是无法摆脱chrome中的水平滚动条（在IE水平滚动条中没有按预期显示）。

HTML：

<div class="container">
<div class="content" />
</div>

CSS：

.container {
    display: inline-block;
    position: absolute;
    background-color: black;
    padding: 5px;

    max-width: 200px;
    max-height: 200px;
    overflow-y: auto;

    top: 20px;
    left: 20px;
}

.content {
    display: block;
    background-color: lightgrey;
    width : 200px;
    height: 200px;
}

我知道我可以使用JS / JQ轻松完成此操作。我的问题是没有他们可以实现吗？

Answer 1

参见JSFiddle：

http://jsfiddle.net/73e7atqm/4/

当您说max-height或max-width时，div不会超出指定尺寸。

因此，您需要使用标准width或height。

此外，overflow-y仅适用于height溢出。对overflow和height溢出使用width。

div大小自动调整到内容

1 个答案: