如何根据孩子的宽度设置div的高度？

Question

我有两个div，一个内部和外部，而内部是一个绝对定位的外部孩子。我希望当内部div的宽度发生变化时，外部div的高度（不是宽度）会变为匹配。我在这里准备了一个简单的小提琴来正确解释我在寻找的东西：

http://jsfiddle.net/2GTDd/5/

在这种情况下，内部div的宽度固定为200px，外部的高度也是如此。无论如何，内部div的宽度是动态的（基于内容），并且外部的高度自动增加以匹配？我可以轻松地用JS解决这个问题，但我想先看看是否有非JS解决方案。

小提琴中的代码：

<div id="outer">
    <div id="inner">
    </div>
</div>

#outer {
    width: 100px;
    height:200px;
    position:relative;
    background-color:red;
}
#inner {
    width:200px;
    height:100px;
    position:absolute;
    background-color:green;
}

Answer 1

检查以下解决方案：

Fiddle

<强> CSS

#outer {
    width: 200px;
    height:100px;
    position:relative;
    background-color:green;
}
#inner {
    position:absolute;
    width:100%;
    height:100px;
    background-color:red;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

---

的更新 的

由于div从中心旋转，这就是为什么我的CSS没有提供准确的输出。所以我只设置了transform-origin:0 0; CSS，它将从左边而不是从中心旋转div：

Updated Fiddle

Answer 2

您可以使用CSS3旋转执行此操作，看一下 jsFiddle 。

<强> CSS

#outer {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    position:relative;
    background-color:red;
    float:left;
    min-height: 100px;
    margin-left: 100px;
}
#inner {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    min-height: 100px;
    background-color:green;
}

Answer 3

试试这个。

#outer {
    width: 100px;
    height:200px;
    position:relative;
    background-color:red;
}
#inner {
    width:200px;
    height:inherit;
    position:absolute;
    left:100%;
    background-color:green;
}

Fiddle Demo

Answer 4

这不是您问题的完整解决方案。 但是，我希望这个例子带给你一点点前进。 它的高度示例等于纯CSS中的宽度（或每个其他宽高比）。

http://jsfiddle.net/2GTDd/9/

HTML：

<div class="box ratio1_2">
            <div class="content">Aspect ratio of <span>1:2</span></div>
        </div>

CSS：

    .ratio1_2:before {
    padding-top: 200%;
}
.box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.box {
    display: inline-block;
    float: left;
    font-size: 12px;
    margin: 5% 5% 0 0;
    position: relative;
    width: 40%;
}

.content {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    color: #FFFFFF;
    left: 0;
    padding: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
}
.content span {
    display: block;
    font-size: 3em;
    font-weight: bold;
}

Answer 5

将high auto用于外部div