html - 修复了带有响应式垂直文本的侧边栏

Question

我想知道如何固定左侧边栏的位置，同时保持垂直文本按钮(关于、画廊、联系人)响应窗口高度。

https://jsbin.com/yaniluy/edit?html,css,output

我的网页主要内容应该滚动，但边栏不应该。

感谢您的帮助!

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%;
}
    
.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="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>

Answer 1

您可以通过使用 position:fixed 将 nav 包装在一个 div 中来轻松实现这一点。我已经在下面修改了您的代码，我相信可以达到您想要的结果。

更多关于css position 属性的信息请访问this webpage .

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>