如何使父div调整大小以包含CSS-Rotated子div？

Question

标题说明了一切：“如何使父div调整大小以包含CSS-Rotated子div？”

这就是我目前得到的：

HTML：

<div id="container">
    <div id="rotator">
        <h1>TEXT</h1>
    </div>
</div>

CSS：

#container {
  display: inline-block;
  border: 1px solid gray;
  padding: 10px;
  overflow: hidden;
}

#rotator {
  display: inline-block;
  width: 200px;
  height: 500px;
  background-color: rgb(130, 310, 130);
  border: 1px solid blue;
  text-align: center;
  line-height: 500px;

  -moz-transform:rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

实例

那么，无论如何要让父母与孩子一起调整大小？ 仅CSS解决方案是最好的。 如果这是不可能的，那么最好的javascript方式是什么？ 应该支持IE9

根据@ misterManSam的建议，我更新了实例以显示解决方案。 在这里找到

Answer 1

旋转时更改div.container的宽度。 在CSS中为#rotator.deg90添加负边距和左边距。

看看这个例子:)

使用Javascript

function to90() {
   var elm = document.getElementById("rotator");
   console.log(elm);
   elm.className = "deg90";

//add these lines
   document.getElementById('container').style.width = "500px";
   document.getElementById('container').style.height = "200px";
}

CSS

#rotator.deg90 {
  /*add this*/
  margin-top: -150px;
  margin-left: 200px;

 -moz-transform:rotate(90deg);
 -webkit-transform: rotate(90deg);
 -o-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 transform:rotate(90deg);
}

Answer 2

你去了： http ： //jsbin.com/viyacaji/11/edit

只需旋转jS功能中的容器，不要移动旋转器div。 因为基本上，你想要实现的是与旋转父div时相同。

有疑问吗？