Html 更改固定边栏的位置

此代码：

身体{
字体系列：“Lato”，无衬线；
}
.侧导航{
宽度：130px；
位置：固定；
z指数：1；
顶部：20px；
左：10px；
背景：#eee；
溢出x：隐藏；
填充：8px0；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#2196F3；
显示：块；
}
.侧导航a:悬停{
颜色：#064579；
}
梅因先生{
左边距：140px；/*与边栏相同的宽度+px中的左侧位置*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
自动边栏
这个边栏和它的内容（链接）一样高，并且总是
显示

向下滚动页面以查看结果

在这种情况下，您只需设置

.sidenav{right:10px；}

，然后必须删除

.main

的边距，并在

.main

div上添加一个宽度，您可以根据内容根据需要进行调整

根据

.sidediv{width:130px；}

的大小，也可以使用

.main{margin right:140px；}

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
宽度：130px；
位置：固定；
z指数：1；
顶部：20px；
右：10px；
背景：#eee；
溢出x：隐藏；
填充：8px0；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#2196F3；
显示：块；
}
.侧导航a:悬停{
颜色：#064579；
}
.main{
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
宽度：75%；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

自动边栏
这个边栏和它的内容（链接）一样高，并且总是
显示

向下滚动页面以查看结果

只需将侧栏的

左侧设置更改为
右侧
，将
左侧边距
更改为
右侧边距
主边距

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
宽度：130px；
位置：固定；
z指数：1；
顶部：20px；
右：10px；
背景：#eee；
溢出x：隐藏；
填充：8px0；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#2196F3；
显示：块；
}
.侧导航a:悬停{
颜色：#064579；
}
梅因先生{
右边距：140px；
/*与px中的侧边栏+左侧位置相同的宽度*/
字号：28px；
/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}

自动边栏
这个边栏和它的内容（链接）一样高，并且总是显示出来。

向下滚动页面以查看结果

试试这个：

身体{
字体系列：“Lato”，无衬线；
}
.侧导航{
宽度：130px；
位置：固定；
z指数：1；
顶部：20px；
右：10px；
背景：#eee；
溢出x：隐藏；
填充：8px0；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#2196F3；
显示：块；
}
.侧导航a:悬停{
颜色：#064579；
}
梅因先生{
右边距：140px；/*与边栏相同的宽度+px中的左侧位置*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
自动边栏
这个边栏和它的内容（链接）一样高，并且总是
显示

向下滚动页面以查看结果

这将起作用

var-width=screen.width-138+“px”；
var sidenav=document.getElementById（“sidenav”）；
sidenav.style.left=宽度
正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
宽度：130px；
位置：固定；
z指数：1；
顶部：20px；
背景：#eee；
溢出x：隐藏；
填充：8px0；
}
.侧导航a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：25px；
颜色：#2196F3；
显示：块；
}
.侧导航a:悬停{
颜色：#064579；
}
梅因先生{
左边距：140px；/*与边栏相同的宽度+px中的左侧位置*/
字体大小：28px；/*增加文本以启用滚动*/
填充：0px 10px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

身体{
自动边栏
这个边栏和它的内容（链接）一样高，并且总是
显示

向下滚动页面以查看结果

请与我们分享您的一些代码，这样会更容易提供帮助