Html 如何实现固定的侧边栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15565754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I implement a fixed sidebar?
提问by Gnamm
I have a situation like this:
我有这样的情况：
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<style>
#wrapper { width: 1100px; margin: 0px auto; }
#wrapper #stream { width: 790px; float: left; border: 1px solid red; }
#wrapper aside { width: 270px; float: left; border: 1px solid red; }
</style>
<body>
<section id="wrapper">
<section id="stream">
some text...
</section>
<aside>
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</aside>
</section>
</body>
</html>
and I don't want the sidebar to move even if the page scrolls down.
即使页面向下滚动，我也不希望侧边栏移动。
I tried setting the aside's position to fixed but so I can't set properly the distance from left.
我尝试将一边的位置设置为固定，但因此无法正确设置与左侧的距离。
I found a solution with jQuery:
我用 jQuery 找到了一个解决方案：
$(document).ready(function () {
$(window).scroll(function () {
$("aside").css('top', $(window).scrollTop()+'px');
});
})
but with Chrome and Safari the scroll of the aside is piecewise.
但是对于 Chrome 和 Safari，旁边的滚动是分段的。
Any help?
有什么帮助吗？
========================
========================
SOLUTION:
解决方案：
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<style>
#wrapper {
width: 1100px;
margin: 0px auto;
}
#stream {
width: 800px;
background: #ccc;
float: left;
}
#sidebar {
float: left;
border: 1px solid red;
width: 200px;
}
aside {
position: fixed;
top: 20px;
border: 1px solid red;
}
</style>
<body>
<section id="wrapper">
<section id="stream">
some text...
</section>
<section id="sidebar">
<aside>
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</aside>
</section>
</body>
</html>
回答by Tim S.
In order to use the top, right, bottomor leftproperties, you have to set the object's displayproperty to absolute, relativeor fixed.
为了使用top，right，bottom或left属性，您必须将对象的设置display属性absolute，relative或fixed。
Either way, by setting position: fixed;it won't move when you scroll.
无论哪种方式，通过设置position: fixed;滚动时它都不会移动。
