Occupy Höhe eines Div, wenn der Inhalt gedreht wird

Ich habe versucht, den Inhalt meiner festen div zu drehen und es dreht sich wie erwartet, aber das Problem ist, dass es nicht die Höhe des div besetzt.Occupy Höhe eines Div, wenn der Inhalt gedreht wird

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

Hinweis: Ich kann es machen, indem width = Auto auf dem div Anwendung aber wie kann ich es erreichen eine feste Breite mit?

Jetzt kann ich es

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

innerhalb der paginator Klasse Zugabe erreichen. Aber gibt es einen Weg sauberer, wie man das macht?

Quelle

2017-02-21 claudios

OT: Sie brauchen nicht '-moz-' und '-o-' Anbieter Präfixe außer wenn Sie Unterstützung Fx 15 und Opera 11.5 (die Chancen sind Sie nicht sind). Und '-ms-' ist für IE9. Quelle [caniuse] (http://caniuse.com/#search=transform). Lang lebe Autoprefixer :) – FelipeAls

@FelipeAls, verwende ich diese Präfixe tatsächlich zur Unterstützung alter Browser. – claudios

@claudios Sind Sie sicher, dass Ihre Website Benutzer mit diesen Browsern hat? Sehen Sie sich die Statistiken zu [CanIUse?] (Http://caniuse.com/#search=transform) an, es scheint, als ob die globale Nutzung dieser Browser ungefähr 0,01% beträgt. –

jsfiddle

Vielleicht funktioniert das jsfiddle für Sie.

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

Quelle

2017-02-23 07:35:58 Eggs

Occupy Höhe eines Div, wenn der Inhalt gedreht wird

Antwort

Verwandte Themen