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

Question

标题说明了一切:“如何使父 div 调整大小以包含 CSS 旋转的子 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);
}

Live Example

那么，有没有办法让 parent 随 child 调整大小？仅 CSS 的解决方案将是最好的。如果那是不可能的，那么最好的 javascript 方法是什么？应该支持IE9

根据@misterManSam 的建议 我更新了实例以展示解决方案。 found here

Answer 1

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

Look at this example :)

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);
}