Vertical menu with rotated text at 100% height - html

Question

I've followed this How to make vertically rotated links in HTML? but I've to improve this solution.
I need to have a vertical menu that fits the entire height of the windows and divides it in three part (cause I've three menu links to show).
How can I update the code suggested in that solution?

Answer 1

Try this:
CSS
#container {
overflow: hidden;
width: 50px;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: table;
}
.section {
position: relative;
height: 33.33333%;
display: table-row;
background: #ccc;
text-align: center;
}
.section .link {
display: table-cell;
vertical-align: middle;
line-height: 50px;
white-space:nowrap;
max-width:50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.section:hover { background: #ddd }
HTML
<div id="container">
<div class="section">aaa</div>
<div class="section">bbb</div>
<div class="section">ccc</div>
</div>
DEMO JSFiddle

Answer 2

My suggestion is to use display: table CSS property as follow:
EDITED
HTML
<div class="container">
<div class="container-child">row 1</div>
<div class="container-child">row 2</div>
<div class="container-child">row 3</div>
</div>
CSS
html, body {
text-align: center;
width: 100%;
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container-child {
display: table-row;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
CODE
the transform: rotate() allows you to rotate the orientation of the text.