CSS固定侧边栏 [英] CSS Fixed sidebar
问题描述
以下HTML使用固定的侧边栏创建了一个简单的布局，但是我想将侧边栏放在内容的右侧
请参见代码段:
#container{宽度:1140px；最大宽度:98％；左边距:自动；右边距:自动；职位:相对最低高度:100％；}#header{位置:固定；z索引:20；宽度:180像素；padding-top:100像素；文字对齐:右；}#maincontent{padding-left:220px；padding-top:100像素；} <！doctype html>< html lang ="zh-CN">< head>< title> Test</title>< link rel ="stylesheet" href ="master.css" type ="text/css"/></head><身体>< div id ="container">< header id ="header">< orem ipsum dolor amet，安全地服从精英，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</header>< div id ="maincontent">< div style ="height:1280px; background:#333;"></div></div>< div style ="height:100px;"></div></div></body></html> 问题是我需要在侧边栏(#header)上指定 right ，这样做将意味着侧边栏将不再尊重该容器...
有什么想法可以解决这个问题吗?谢谢
我刚刚发现的技巧是将要显示的项目放在右侧(标题)上，使其显示方式.所以把它漂浮在那儿.
然后添加一个固定的内部容器.
完整的示例: http://jsfiddle.net/jupitercow/MjPC4/
因此，我像这样更新了标头CSS:
#header{浮动:正确；z索引:20；宽度:180像素；padding-top:100像素；文字对齐:右；}#header .inner {位置:固定；宽度:180像素；} 和HTML:
< header id ="header">< div class ="inner">< p>洛里姆(Lorem ipsum)多洛蒂(Door)坐着，奉献自以为是，圣劳伦斯(Eiusmod tempor)禁止劳动和多萝拉·玛格纳·阿里夸(Doreore magna aliqua).</div></header> The following HTML creates a simple layout with a fixed sidebar, but I want to put the sidebar on the right-hand side of the content
Please see the code snippet:
#container
{
width: 1140px;
max-width: 98%;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 100%;
}
#header
{
position: fixed;
z-index: 20;
width: 180px;
padding-top: 100px;
text-align: right;
}
#maincontent
{
padding-left: 220px;
padding-top: 100px;
}
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="master.css" type="text/css" />
</head>
<body>
<div id="container">
<header id="header">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>
<div id="maincontent">
<div style="height:1280px;background:#333;"></div>
</div>
<div style="height:100px;"></div>
</div>
</body>
</html>
The problem is that I would need to specify the right on the sidebar (#header) and in doing so would mean the sidebar WOULD NO LONGER honour the container...
Any ideas how I could get around this? Thanks
The trick to this that I just found is to position the item that you want to show up on the right side (header) how you want it to show up. So float it over there.
Then add an inner container that is fixed.
Full working example: http://jsfiddle.net/jupitercow/MjPC4/
So, I updated your header CSS like this:
#header
{
float: right;
z-index: 20;
width: 180px;
padding-top: 100px;
text-align: right;
}
#header .inner {
position: fixed;
width: 180px;
}
And the HTML:
<header id="header">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</header>
这篇关于CSS固定侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
