100% 高度块与垂直文本答案

【问题标题】：100% height block with vertical text100% 高度块与垂直文本
【发布时间】：2012-06-01 01:36:03
【问题描述】：

我有一个可变高度的块，我想在其中放置另一个具有 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>

可以看到内部块的计算宽度与旋转前的文本宽度相同。

更新：

这是我最终想要得到的图片：

它是一个水平条纹，项目左侧堆叠，并带有一个垂直标题块。 Stripe 的高度是可变的，因此项目应该适应并且标题的文本应该保持居中。

【问题讨论】：

标签： html css css-transforms vertical-text

【解决方案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> 垂直对齐（@987654335@ [2em 也来自line-height]）。一旦<h1> 垂直对齐，它会在左侧中间逆时针旋转 90 度。为了让<h1> 再次可见，它被垂直平移50%（水平拉回屏幕）和水平-50%（垂直对齐）。是的，措辞是正确的——一旦你旋转 [-]90 度，一切都会变得混乱；）

陷阱

<h1> 仅支持静态“高度”。在这种情况下，仅支持 1 行。
包装将不起作用（在此示例中我实际上已禁用它），因此任何不适合 .wrapper 的 height 的内容都将被隐藏。

【讨论】：

太棒了！谢谢！
看了一眼这个问题，立刻想到了这种解决方法。很好的答案！不过，好奇的是，使用您提供的代码，您如何对已旋转的文本进行“右对齐”（或顶部对齐，我想）？
原来只是删除 margin: auto; 就可以了，要改变垂直位置，你可以调整 margin-top/bottom 属性。
@spatar，这个答案是否缺少赏金的东西？还是等到最后再分配？
@Nightfirecat，实际上，最好是：删除bottom:0;和margin:auto;，将transform-origin更改为0 0，将transform更改为rotate(-90deg) translate(-100%, 0)为.wrapper header h1 .见top-aligned example。要将其与底部对齐，请执行相同的操作，除了删除 top:0; 而不是 bottom:0;。请参阅bottom-aligned example。

【解决方案2】：

在更彻底地查看变换样式后，它看起来并非如此。您需要知道外部div 的精确高度。

【讨论】：

很可能你是对的。但我会再等几天。谢谢。
不用担心。如果其他人确实发布了解决方案，我会非常渴望阅读它！

【解决方案3】：

我想出了这个：

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

【讨论】：

实际上我不想旋转外部div，因为我的想法是在内部使用常规（未旋转）文本堆叠更多divs。对不起，如果我不清楚。我在问题中附加了一张新图片，以显示我的最终目标是什么。

【解决方案4】：

我能想到的最好的方法是：http://jsfiddle.net/EwgtT/

block1 的可变高度不会有问题，但是你的消息的可变高度是；它总是从底部开始。

编辑： 已更新，因此在 FF 和 IE 中运行良好：http://jsfiddle.net/EwgtT/2/

【讨论】：

我在 Firefox 中尝试了您的代码，文本出现在页面底部，红色块之外。