100% блок высоты с вертикальным текстом

У меня есть блок переменной высоты, в котором я хочу поставить еще один блок со 100% высотой и вертикальным текстом (сверху вниз) и уложить его в левую часть внешнего блока. Есть ли способ достичь этого с помощью CSS-преобразований, но без расчетов ширины и высоты в JS?

Это то, что я могу получить до сих пор:

<!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>

Вы можете видеть, что вычисляемая ширина внутреннего блока совпадает с шириной текста перед вращением.

UPDATE:

Вот изображение того, что я хочу получить в конце:

Это горизонтальная полоса с элементами, расположенными слева от нее, и с вертикальным блоком заголовка. Высота полосы является переменной, поэтому элементы должны адаптироваться, а текст заголовка должен оставаться центрированным.

Ответы

Ответ 1

Я считаю, что вы использовали только <table>, потому что это был самый простой способ добиться того, что вы искали, поэтому я вырезал его из уравнения и вместо этого использовал семантический HTML. Если есть еще одна причина, я заранее извиняюсь, и вы должны иметь возможность переносить стили на использование <table>.

См. jsFiddle demo для просмотра кода в действии. Или перейдите к коду:

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

Как это работает

<header> устанавливается на высоту .wrapper и имеет значение width равным 2em (значение line-height для <h1>). Затем <h1> выравнивается по вертикали (с top:0;bottom:0;height:2em;margin:auto; [2em также от line-height]). Как только <h1> выровнен по вертикали, он поворачивается против часовой стрелки на 90 градусов по середине его левой стороны. Чтобы снова отобразить <h1>, он переводится 50% по вертикали (чтобы потянуть его обратно на экран по горизонтали) и -50% по горизонтали (чтобы вертикально выровнять его). И да, формулировка правильная - все просто запутывается, как только вы вращаетесь на [-] на 90 градусов;)

Gotchas

Для <h1> поддерживается только статическая "высота". В этом случае поддерживается только 1 строка.
Обтекание не будет работать (я действительно отключил его в этом примере), поэтому все, что не соответствует height .wrapper, будет скрыто.

Ответ 2

После более тщательного изучения стилей преобразования это не так. Вам нужно знать точную высоту outter div.

Ответ 3

Лучшее, что я мог придумать, это следующее: http://jsfiddle.net/EwgtT/

Высота переменной block1 не будет проблемой, но высота переменной вашего сообщения; он всегда будет начинаться внизу.

Edit: Обновлено, поэтому он отлично работает в FF и IE: http://jsfiddle.net/EwgtT/2/

Ответ 4

Я придумал это:

<!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>

переключилось на внешний элемент,
а затем использовать атрибут width для определения высоты в нижней части страницы (когда вы играете с этим, вы на самом деле играете с высотой там.)
а для пустого левого пространства, видимого после вращения, я использовал переменную ширину (высоту) в качестве отрицательного поля.

Вы можете увидеть это здесь: http://pastehtml.com/view/c0hl7zxci.html