【问题标题】：Change the place of a fixed Sidebar更改固定侧边栏的位置
【发布时间】：2022-01-25 21:24:24
【问题描述】：
这段代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always
shown.</p>
<p>Scroll down the page to see the result.</p>
</div>
</body>
</html>
在左侧生成一个固定的滑动条：
但是我想把位置改到右边。
像这样：
那么我怎样才能把固定的滑动条放在右边呢？
以及我可以在页面周围移动固定侧边栏的哪个命令？
谢谢你的帮助:)
【问题讨论】：
标签：
html
css
css-position
【解决方案1】：
在这种情况下，您可以只设置.sidenav {right: 10px;}，但必须从.main 中删除边距，并在.main div 上添加宽度，您可以根据内容随意调整。
根据.sidediv {width: 130px;}的大小，也可以使用.main {margin-right: 140px;}。
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
width: 75%;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always
shown.</p>
<p>Scroll down the page to see the result.</p>
</div>
</body>
</html>
【解决方案2】：
只需将边栏的left 设置更改为right，将main 的margin-left 设置为margin-right
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-right: 140px;
/* Same width as the sidebar + left position in px */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always shown.
</p>
<p>Scroll down the page to see the result.</p>
</div>
【解决方案3】：
试试这个：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-right: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always
shown.</p>
<p>Scroll down the page to see the result.</p>
</div>
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
【解决方案4】：
这会起作用。
var width = screen.width -138 +"px";
var sidenav = document.getElementById("sidenav");
sidenav.style.left = width;
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
</style>
</head>
<body>
<div class="sidenav" id="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always
shown.</p>
<p>Scroll down the page to see the result.</p>
</div>
</body>
</html>