Занимайте высоту div при повороте содержимого

Я попытался повернуть содержимое моего фиксированного div, и он вращается, как ожидалось, но проблема в том, что он не занимает высоту div.Занимайте высоту div при повороте содержимого

Образец скрипки 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; 
}

Примечание: Я могу это сделать, применяя ширину = АВТОМАТ на DIV, но как я могу достичь его, используя фиксированную ширину?

Теперь я могу достигнуть его добавления

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

внутри класса Paginator. но есть ли способ очистить от того, как это сделать?

источник

2017-02-21 claudios

OT: вам не нужно 'префиксов -moz-и' -o-'поставщика, за исключением, если вы поддерживаете Fx 15 и Opera 11.5 (скорее всего, вы не). И '-ms-' для IE9. Источник [caniuse] (http://caniuse.com/#search=transform). Да здравствует Autoprefixer :) – FelipeAls

@FelipeAls, я на самом деле использую эти префиксы для поддержки старых браузеров. – claudios

@claudios вы уверены, что на вашем сайте есть пользователи с этими браузерами? Посмотрите статистику на [CanIUse?] (Http://caniuse.com/#search=transform), похоже, что глобальное использование этих браузеров составляет около 0,01%. –

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

источник

2017-02-23 07:35:58 Eggs

Занимайте высоту div при повороте содержимого

ответ

Смежные вопросы