Heim > Fragen und Antworten > Hauptteil
我想达到下面所述的效果
页面分两大块儿，①所指的p宽度固定，高度不固定，居中
②所指的p要紧贴着①；并且不随着页面的滚动而滚动【或者说②处于浏览器窗口固定的位置】；
我所不能解决的问题
如果对②使用position：fixed，那么当浏览器窗口不固定的时候，如何才能让它紧贴着①；
或者说②的left或right属性怎么取值？
有想过浏览器窗口宽度发生变化时，用js去调整②的left或right取值。。。
大家有什么技巧来实现这种效果吗
黄舟2017-04-11 11:02:55
<style type="text/css">
*{ margin:0; padding:0; }
p{ width:1000px; height:auto; background:green; margin:0 auto; position:relative; }
h1{ width:100%; height:200px; }
p{ width:200px; height:200px; background:red; position:fixed; left:50%; top:50%; margin:-100px 0 0 500px; }
</style>
</head>
<body>
<p>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
</p>
<p></p>
不知道你要是不是这样，如果你的整体宽度大于1366的话，可能你就要缩小中心的那个板块宽度，那么久需要用一点JS （还有就是fixed 兼容到IE7， 如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了）
阿神2017-04-11 11:02:55
我觉得应该只能用js去解决了
jquery的代码如下
//监视窗口大小变动事件
$(window).resize(function (){
var ①=$("①")
var ①offset=①.offset();
//用元素距离左面的像素+元素本身的宽度
var ②left=①offset.left+①.outerWidth()
$("②").css('left',②left)
})
//在页面加载完毕之后手动执行一下reszie事件
$(window).trigger('resize')阿神2017-04-11 11:02:55
(楼上正解)如果不考虑兼容性，还可以这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p class="main"></p>
<p class="aside"></p>
</body>
</html>$mainWidth: 240px;
$asideWidth: 100px;
html,body {
margin: 0;
box-sizing: border-box;
}
.main {
margin: 20px auto;
width: $mainWidth;
height: 4000px;
border: 1px solid #333;
}
.aside {
position: fixed;
top: 200px;
right: 0;
left: 0;
margin: auto;
width: $asideWidth;
height: 100px;
border: 1px solid #333;
transform: translateX(($mainWidth+$asideWidth)*.5+10px);
}结果展示：
http://codepen.io/huangxutao/pen/VjawEO/