说明
这是个很老的用法了，现实中可能不太用到。
但对于新手，学习position，是个比较好的素材。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{
margin:0px;
padding:0px;
position:relative;
}
.main{
border:1px solid red;
margin-right: 300px;
word-wrap: break-word;
}
.sidebar{
width: 300px;
position:absolute;
top:0;
right: 0;
}
</style>
<body>
<div class="main">
<p>内容区-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域-内容区域</p>
</div>
<div class="sidebar">右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏-右边栏</div>
</body>
</html>
解释
这里内容区main是根据其内容自动调整宽度的。但是给它设置一个比较大margin-right，让它右边一直有一片空白。
紧接着，设置右边栏sidebar的position为absolute，这样它就会根据父元素进行定位。它的父元素是body，这里需要将body的position设为relative。
紧接着，设置top和right两个属性，把右边栏固定到空白位置。
这样就形成了一个右边栏一直不变，左边内容去会根据屏幕宽度来调整自己宽度了。
3429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
