Blok 100% wysokości z tekstem pionowym

Question

Blok 100% wysokości z tekstem pionowym

Mam blok o zmiennej wysokości, w którym chcę umieścić kolejny blok o 100% wysokości i pionowym tekście (od dołu do góry) i umieścić go po lewej stronie zewnętrznego bloku. Czy istnieje sposób, aby to osiągnąć za pomocą transformacji CSS, ale bez obliczeń szerokości i wysokości w JS?

Szkic

To jest to, co mogłem uzyskać do tej pory:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block1 {
    border: 4px solid #888;
    height: 120px;
    width: 200px;
}
.block2 {
    height: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: center center;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: center center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
</body>
</html>

Mój test

Widać, że wewnętrzna szerokość obliczeniowa bloku jest taka sama jak szerokość tekstu przed obrót.

UPDATE:

Oto zdjęcie tego, co chcę dostać w końcu:

Tutaj wpisz opis obrazka

Jest to poziomy pasek z elementami ułożonymi po lewej stronie i z pionowym blokiem nagłówka. Wysokość paska jest zmienna, więc elementy powinny się dostosować, a tekst nagłówka powinien pozostać wyśrodkowany.

14

html css css3 css-transforms vertical-text

Author: spatar, 2012-06-01

Source

4 answers

Po dokładniejszym przyjrzeniu się stylom transformacji, nie wydaje się, aby tak było. Musisz znać dokładną wysokość wylotu div.

0

Author: Litty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-02 01:06:54

Wymyśliłem to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block2 {
    width: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
}
.block1 {
    border: 4px solid #888;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    text-align:center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
<style>
.block1{
width:500px;
margin-left:-500px;
}
</style>
</body>
</html>

przełączył transformację na element zewnętrzny,
Następnie użyto atrybutu width, aby zdefiniować wysokość na dole strony (kiedy grasz z tym, faktycznie grasz z wysokości tam.)
A dla pustej lewej przestrzeni widocznej po obrocie użyłem zmiennej szerokość (wysokość) jako ujemnego marginesu.

Możesz zobaczyć tutaj: http://pastehtml.com/view/c0hl7zxci.html

0

Author: Taha Paksu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-05 17:08:28

Najlepsze co mogłem wymyślić to: http://jsfiddle.net/EwgtT/

Zmienna wysokość block1 nie będzie problemem, ale zmienna wysokość wiadomości jest; zawsze zaczyna się od dołu.

Edit: Zaktualizowany, więc działa dobrze w FF i IE: http://jsfiddle.net/EwgtT/2/

0

Author: iddo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-06 08:13:30

score 23 · Accepted Answer

Uważam, że używałeś tylko <table>, ponieważ wydawało się to najłatwiejszym sposobem osiągnięcia tego, czego szukałeś, więc wyciąłem to z równania i użyłem semantycznego HTML. Jeśli był inny powód, z góry przepraszam i powinieneś być w stanie przenieść style, aby zamiast tego użyć <table>.

Zobacz jsfiddle demo aby zobaczyć kod w akcji. Lub, kontynuuj do kodu:

HTML

<section class="wrapper">
    <header><h1>Test</h1></header>
    <article>Text.</article><!--
    --><article>More text.</article><!--
    --><article>Photos of cats.</article><!--
    --><article>More photos of cats.</article>
</section>

CSS

.wrapper {
    margin:1em;
    position:relative;
    padding-left:2em; /* line-height of .wrapper div:first-child span */
    background:#fed;
}
.wrapper header {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:2em; /* line-height of .wrapper div:first-child span */
    overflow:hidden;
    white-space:nowrap;
}
.wrapper header h1 {
    -moz-transform-origin:0 50%;
    -moz-transform:rotate(-90deg) translate(-50%, 50%);
    -webkit-transform-origin:0 50%;
    -webkit-transform:rotate(-90deg) translate(-50%, 50%);
    -o-transform-origin:0 50%;
    -o-transform:rotate(-90deg) translate(-50%, 50%);
    -ms-transform-origin:0 50%;
    -ms-transform:rotate(-90deg) translate(-50%, 50%);
    transform-origin:0 50%;
    transform:rotate(-90deg) translate(-50%, 50%);
    position:absolute;
    top:0;
    bottom:0;
    height:2em; /* line-height of .wrapper div:first-child span */
    margin:auto;
    font-weight:bold;
    font-size:1em;
    line-height:2em; /* Copy to other locations */
}
.wrapper article {
    display:inline-block;
    width:25%;
    padding:1em 1em 1em 0;
    vertical-align:middle;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

Jak to prace

<header> jest ustawiona na wysokość .wrapper i ma width ustawioną na 2em (wartość line-height dla <h1>). Następnie {[9] } jest wyrównany pionowo (z top:0;bottom:0;height:2em;margin:auto; [2em jest również z line-height]). Gdy <h1> jest wyrównany pionowo, jest obracany w lewo o 90 stopni o środek lewej strony. W celu ponownego uwidocznienia <h1>, jest ona tłumaczona 50% w pionie (aby pociągnąć ją z powrotem na ekran w poziomie) i -50% w poziomie (aby wyrównać go w pionie). I tak, sformułowanie jest poprawne-wszystko robi się mylące, gdy obrócisz się o [ - ] 90 stopni;) [22]}

Gotchas

tylko statyczna "wysokość" jest obsługiwana dla <h1>. W tym przypadku obsługiwana jest tylko 1 linia.
Zawijanie nie będzie działać( w tym przykładzie wyłączyłem go), więc wszystko, co nie pasuje do height z .wrapper, będzie ukryte.