我有一列在页面右侧对齐。该列必须跨越页面的整个高度,因此我将其固定的原因。列中将有不应修复的元素。无论我玩什么元素,都会继续滚动页面。
有没有人有办法让子 div 在固定的父级内保持静态,或者有办法在不使用固定定位的情况下使列跨越页面的整个高度?
这是 CSS:
.rightCol{
width: 28px;
position: fixed;
bottom: 0px;
top: 0px;
z-index: -1;
margin-left: 969px;
}
.rightColItem{
margin-top: 95px;
margin-left: 10px;
position: absolute;
}
和 HTML:
<div class="rightCol">
<div class="rightColItem">
I want this to be static and not fixed
</div>
</div>
这是一个 fiddle 的链接 --> http://jsfiddle.net/7hmKy/
非常感谢任何帮助!
编辑 1:右对齐栏位于 1000 像素的容器 div 内。
最佳答案
一种更简单的方法(标记也更少)是为页面背景使用 CSS3 渐变。您还可以轻松地使用图像回退来支持旧浏览器:
body {
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
background: linear-gradient(right, #fa8072 200px, transparent 200px);
}
.sidebar {
width: 200px;
float: right;
}
Demo (我使用 Sass 和 Compass 因为它们使 CSS3 渐变更容易保持更新。)
编辑:
根据您的评论,我创建了一个新示例,使用 1000 像素宽的居中 body
(通过一些技巧,您可以使用 div)并更改渐变以复制边框:
body {
height: 100%;
min-height: 2000px;
width: 1000px;
margin: 0 auto;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}
关于javascript - 是否可以在保持父 div 固定的同时使子 div 静态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13328399/