css - 内容旋转时占用div的高度

Question

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

fiddle 示例 here .

HTML:

<div class="outer-left">
  <h2 class="paginator">Page 1 0f 10</h2>
</div>

CSS:

.outer-left {
    background: #EFB041;
    height: 100%;
    display: block;
    width: 4%;
    position: fixed;
    left: 18%;
}

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

Note: I can make it by applying width = auto on the div but how can I achieve it using a fixed width?

现在我可以实现它了

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

在分页器类中。但是有没有更清晰的方法来完成这项工作？

Answer 1

jsfiddle

也许这个 jsfiddle 适合你。

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