问修复了带有响应式竖排文本的侧边栏

EN

body {
  margin: 0;
}
    
h1 {
  text-align: center;
  font-size: 36px;
}

a {
  margin: 0px auto;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top:50%;
  left:50%;
  writing-mode: tb-rl;
  transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
  
.nav1 {
  background-color:red;
  position: relative;
  height: 20vh;
  //width: 10%; this no longer works since they are contained by the fixed div, 
  //but you can add this to the fixed element to achieve the same look
}

.fixed {
    position:fixed;
    width: 10%; 
}
    
.section {
  float: right;
  width: 90%;
}

<div class="section">
    <h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>   
</div>

<div class="fixed">
    <div class="nav1"><a href="http://www.google.com/">ABOUT</a></div>
    <div class="nav1"><a href="http://www.google.com/">GALLERY</a></div>
    <div class="nav1"><a href="http://www.google.com/">BOOKS</a></div>
    <div class="nav1"><a href="http://www.google.com/">MEDIA</a></div>
    <div class="nav1"><a href="http://www.google.com/">CONTACT</a></div>
</div>

*{
  font-family:sans-serif;
  box-sizing:border-box
}
.sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:150px;
  z-index:10;
  background:white;
  box-shadow: 4px 4px 9px rgba(0,0,0,.12)
}
.sidebar span{
  margin: 5%;
  display:block;
  padding: 50px 0;
  text-align:center;
  font-size:20px;
  transform:rotate(270deg)
}
.main{
  margin-left:170px;
  overflow-y:auto;
  font-size:50px;
  line-height:2
}

<div class="sidebar">
  <span>Home</span>
  <span>About</span>
  <span>Contact</span>
</div>
<div class="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.

Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.

Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.

Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.

Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.

Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.

Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.

Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.

Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.

Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa.
</div>

@media(max-width:736px){
    .sidebar{
        position:fixed;
        top:0;
        left:0;
        height:100px;
        width:100%;
        z-index:10;
        background:white;
        box-shadow: 4px 4px 9px rgba(0,0,0,.12);
    }
    .main{
       margin-top:130px;
    }
}