Css 旋转内容时占据div的高度

我尝试旋转我的固定div的内容，它按预期旋转，但问题是它没有占据div的高度

样品小提琴

HTML:

注意：我可以通过在div上应用width=auto来实现，但是我如何才能做到呢 使用固定宽度来实现它

现在我可以实现了

margin-top: 600px;
white-space:nowrap;

在paginator类中。但是，有没有一种方法可以更干净地完成这项工作呢？

也许这个JSFIDLE适合你

HTML:
    <div class="outer-left">
      <h2 class="paginator">Page&nbsp;1&nbsp;of&nbsp;10</h2>
    </div>
>
CSS:

  .outer-left {
    position: relative;
    background: #EFB041;
    overflow: hidden;
    width: 5%;
    left: 18%;
    height: 200px;
    float: left;

}

.paginator {
  position: absolute;
  top: 30%;
  left: -2.0em;
  width: auto;
  margin: 0;
  padding:0;

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

HTML：
第1页，共10页
>
CSS:
.左外{
位置：相对位置；
背景#EFB041；
溢出：隐藏；
宽度：5%；
左：18%；
高度：200px；
浮动：左；
}
帕吉纳托先生{
位置：绝对位置；
最高：30%；
左：-2.0em；
宽度：自动；
保证金：0；
填充：0；
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
变换：旋转（-90度）；
颜色：#fff；
}

OT：您不需要

-moz-

和

-o-

供应商前缀，除非您支持Fx 15和Opera 11.5（很可能您不需要）。而

-ms-

用于IE9。来源。Long live Autoprefixer:）@FelipeAls，我实际上使用这些前缀来支持旧浏览器。@claudios你确定你的网站有使用这些浏览器的用户吗？查看上的统计数据，这些浏览器的全球使用率似乎约为

0.01%

@SergeyDenisov，是的，因为我们从系统中获得的统计数据。顺便说一句，这个网站提供活动和调查服务

margin-top: 600px;
white-space:nowrap;

HTML:
    <div class="outer-left">
      <h2 class="paginator">Page&nbsp;1&nbsp;of&nbsp;10</h2>
    </div>
>
CSS:

  .outer-left {
    position: relative;
    background: #EFB041;
    overflow: hidden;
    width: 5%;
    left: 18%;
    height: 200px;
    float: left;

}

.paginator {
  position: absolute;
  top: 30%;
  left: -2.0em;
  width: auto;
  margin: 0;
  padding:0;

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