html 垂直撑满,html – 具有垂直文本的100％高度块

我相信你只使用< table>因为它似乎是实现你想要的最简单的方法,所以我把它从方程式中删除,并使用语义HTML.如果有其他原因,我提前道歉,您应该可以将样式移植到使用< table>代替.

HTML

Test

Text.More text.Photos of cats.More photos of cats.

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的高度,并将其宽度设置为2em(< h1>的line-height的值).然后,< h1>垂直对齐(顶部：0;底部：0; height：2em; margin：auto; [2em也来自line-height]).一旦< h1>垂直对齐,在左侧中间逆时针旋转90度.为了使< h1>再次看到,它被垂直翻译50％(水平地将其拉回到屏幕上),并且水平地-50％(垂直对齐).是的,措辞是正确的 – 一旦你旋转[ – ] 90度,一切都会变得混乱;)

陷阱

>< h1>仅支持静态“height”.在这种情况下,只支持1行.> Wrapping将不起作用(我在本例中实际上禁用了它),所以任何不符合.wrapper高度的东西都将被隐藏.