我想知道如何使我的左侧边栏位置固定，同时保持垂直文本按钮（ABOUT，GALLERY，CONTACT）响应窗口高度。
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>您可以通过使用position:fixed将导航包装在div中来轻松实现此目的。我修改了你的代码，我认为这是你想要的结果。
有关css位置属性的更多信息，请访问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>给position:fixed一个去。非常适合将项目“固定”到用户屏幕。固定元素，通常不去任何地方:-)
*{
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;
}
}
在这里你必须使用css的position属性，并将position设置为sticky并在左侧栏上使用该样式。