绝对定位的粘性顶部div
Hen*_*ell 12 css positioning css-position sticky
我正在使用绝对定位让div填充整个浏览器窗口。但是，我不想将其与有时在那里且有时不在的粘性div结合使用。
为了使事情更清晰，请查看以下jsFiddle：http : //jsfiddle.net/henrikandersson/aDdRS/
我希望“顶部”，“左侧”和“子标题”始终保持不变。我还希望“内容” div填充窗口的剩余内容。但是，有时我想在“内容”之前显示“警报” div。到目前为止，一切都很好，您可以在jsFiddle中看到。但是，我希望“警报”坚持“子标题”并在滚动时停留在该位置。如您所见，如果您调整窗口大小，那么“警报”将随“内容”一起滚动-我不希望这样。
有人知道如何解决这个问题吗？
编辑：我在我的jsFiddle中进行了更改，我将“警报”放置在应有的位置（在子标题和内容区域之间）。如您所见（http://jsfiddle.net/henrikandersson/aDdRS/12），由于content-area具有top：20px，所以它不会向下推“ content-area”。而且我不能设置top：40px，因为“ alert”应该可以改变高度，并且我希望内容区域在有或没有上述警报的情况下都具有相同的css。
编辑＃2：此问题处理相同的问题，但也没有该问题的解决方案。好像不使用JavaScript是不可能的： 可变高度滚动div，相对于可变高度同级放置
Fac*_*utz 23
position:fixed 是绝对位置和粘性的组合
- 不，这不对。在某些情况下它可能会这样工作，但这不是“固定”的意思。“绝对”位置相对于最近定位的祖先，而“固定”位置是相对于视口建立的初始包含块。https://developer.mozilla.org/en-US/docs/Web/CSS/position (12认同)
Nam*_*Nam 14
2018-6-18
我选择使用CSS方式position: sticky。
该https://github.com/abouolia/sticky-sidebar。
对我不起作用（我正在将Vue.js 2.0 SPA与vue-router和vuex一起使用）
我也想要的元素position: absolute第一，
然后position: sticky
解
- 父HTML元素用于
position: absolute具有正确的位置。
（例如，不要忘记height为父级设置height:100%）。
- 子HTML元素
position: sticky
为我工作。
- 我设法使之与之相反：父级粘性和子级为绝对值（这使父级的高度为0）。但是感谢您指出正确的方向:) (4认同)
- 为了使其发挥作用，将高度设置为 100% 非常重要！ (4认同)
- 我根据以下答案制作了一个YouTube视频：（30秒）https://www.youtube.com/watch?v=LVlD6NmCjts&feature=youtu.be (2认同)
- 感谢您的视频，很好的回答。我也能够使它工作。 (2认同)
- 如果您无法将高度设置为 100%，我可以确认 @RyanPergent 的方法有效。将父级设置为粘性，将子级设置为绝对。不过，您仍然需要容器（无论滚动的是什么）具有相对位置。 (2认同)
使用一些增强功能编辑更新
body {
height: 100%;
overflow: hidden;
}
#top{
position: absolute;
background: yellow;
height: 50px;
width: 100%;
top: 0;
}
#left {
background: #e3e3e3;
position: absolute;
bottom: 0;
left: 0;
top: 50px;
width: 200px;
}
#right {
position: absolute;
bottom: 0;
left: 200px;
right: 0;
top: 50px;
}
#sub-header {
height: 20px;
background: orange;
}
#content-area {
position: absolute;
top: 20px;
right: 0;
bottom: 0;
left: 0;
}
#alert {
background: red;
color: white;
}
#content {
width: 100%;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow-y: auto;
position: absolute;
}
#alert + #content {
top: 20px;
}
#alert:empty + #content {
top: 0px;
}<body>
<div class="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">
<div id="sub-header">subheader</div>
<div id="content-area">
<div id="alert">alert!</div>
<div id="content">content<br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc magna, eget vehicula ligula. Vestibulum in massa massa, ut feugiat arcu. Suspendisse feugiat commodo tellus, id aliquam dolor cursus eu. Aliquam erat volutpat. Nulla interdum ipsum ut lectus sollicitudin blandit sodales ante malesuada. Etiam ac neque ut turpis faucibus luctus non et arcu. Maecenas ut risus ut odio fringilla sagittis. Sed nulla lorem, suscipit at condimentum quis, adipiscing eget turpis. Morbi accumsan est at tellus hendrerit sed blandit nibh sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent gravida, velit id sodales bibendum, nulla leo rutrum quam, vel tempus justo mi vitae sapien. In imperdiet blandit rhoncus. Phasellus at massa nulla, ut tincidunt est. Nam viverra dui non enim semper consequat. Etiam sed libero sed ante condimentum bibendum ultrices eu nunc.
Integer massa nibh, interdum eget consectetur sed, scelerisque a ipsum. Fusce et ligula erat. Vestibulum lacus enim, facilisis id sollicitudin non, condimentum eu sem. Donec quis magna nec massa vulputate hendrerit. Nam leo nulla, fermentum eu congue quis, imperdiet sit amet orci. Aliquam ornare felis commodo est rhoncus blandit. Quisque at neque ac turpis vulputate sagittis. Donec et viverra risus. Fusce posuere lacus aliquam erat molestie sed tincidunt elit placerat. Sed pulvinar varius neque. Nullam congue adipiscing quam egestas convallis. Sed molestie massa euismod dolor facilisis laoreet.
Cras sit amet nisi sapien, non fringilla arcu. Aenean euismod gravida sem. Donec eu luctus justo. Aliquam erat volutpat. Mauris vestibulum sagittis magna, eget bibendum dolor tempor nec. Nunc rhoncus suscipit felis eu imperdiet. Sed fermentum diam non turpis tempor sit amet adipiscing leo elementum. Donec aliquam consequat elit id auctor.
Praesent vehicula, nibh a elementum imperdiet, urna nulla iaculis leo, ac hendrerit sem massa ac tortor. Suspendisse viverra consectetur libero a luctus. Maecenas iaculis mi id urna fermentum condimentum viverra tellus vulputate. Suspendisse potenti. Aliquam fermentum nulla quis dolor commodo scelerisque. Donec cursus laoreet consectetur. Praesent ultricies arcu ut ante hendrerit imperdiet. Etiam at metus lectus. Aliquam ut ligula neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor scelerisque purus non sollicitudin. Sed elementum facilisis nisl, eget commodo est congue in. Etiam tincidunt viverra felis, vel tincidunt nulla pretium vel. Phasellus commodo bibendum magna et imperdiet. Aenean euismod condimentum magna eget venenatis. Pellentesque lorem eros, ornare at egestas vel, tincidunt non nunc. Quisque non diam nisl, ut consectetur metus. Fusce ipsum tortor, viverra et lobortis et, ullamcorper non magna. Duis elementum molestie sem, et ullamcorper neque eleifend non. Nunc iaculis quam eros, in pellentesque nunc. Donec tincidunt faucibus est, porta cursus eros imperdiet volutpat.</div>
</div>
</div>
</div>
<body>第一篇文章
为什么不滚动只是.content，而不是.content-area
body {
height: 100%;
overflow: hidden;
}
#top{
position: absolute;
background: yellow;
height: 50px;
width: 100%;
top: 0;
}
#left {
background: #e3e3e3;
position: absolute;
bottom: 0;
left: 0;
top: 50px;
width: 200px;
}
#right {
position: absolute;
bottom: 0;
left: 200px;
right: 0;
top: 50px;
}
#sub-header {
height: 20px;
background: orange;
}
#content-area {
position: absolute;
top: 20px;
right: 0;
bottom: 0;
left: 0;
}
#alert {
background: red;
color: white;
}
#content {
width: 100%;
height: 100%;
overflow-y: auto;
}<body>
<div class="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">
<div id="sub-header">subheader</div>
<div id="content-area">
<div id="alert">alert!</div>
<div id="content">content<br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc magna, eget vehicula ligula. Vestibulum in massa massa, ut feugiat arcu. Suspendisse feugiat commodo tellus, id aliquam dolor cursus eu. Aliquam erat volutpat. Nulla interdum ipsum ut lectus sollicitudin blandit sodales ante malesuada. Etiam ac neque ut turpis faucibus luctus non et arcu. Maecenas ut risus ut odio fringilla sagittis. Sed nulla lorem, suscipit at condimentum quis, adipiscing eget turpis. Morbi accumsan est at tellus hendrerit sed blandit nibh sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent gravida, velit id sodales bibendum, nulla leo rutrum quam, vel tempus justo mi vitae sapien. In imperdiet blandit rhoncus. Phasellus at massa nulla, ut tincidunt est. Nam viverra dui non enim semper consequat. Etiam sed libero sed ante condimentum bibendum ultrices eu nunc.
Integer massa nibh, interdum eget consectetur sed, scelerisque a ipsum. Fusce et ligula erat. Vestibulum lacus enim, facilisis id sollicitudin non, condimentum eu sem. Donec quis magna nec massa vulputate hendrerit. Nam leo nulla, fermentum eu congue quis, imperdiet sit amet orci. Aliquam ornare felis commodo est rhoncus blandit. Quisque at neque ac turpis vulputate sagittis. Donec et viverra risus. Fusce posuere lacus aliquam erat molestie sed tincidunt elit placerat. Sed pulvinar varius neque. Nullam congue adipiscing quam egestas convallis. Sed molestie massa euismod dolor facilisis laoreet.
Cras sit amet nisi sapien, non fringilla arcu. Aenean euismod gravida sem. Donec eu luctus justo. Aliquam erat volutpat. Mauris vestibulum sagittis magna, eget bibendum dolor tempor nec. Nunc rhoncus suscipit felis eu imperdiet. Sed fermentum diam non turpis tempor sit amet adipiscing leo elementum. Donec aliquam consequat elit id auctor.
Praesent vehicula, nibh a elementum imperdiet, urna nulla iaculis leo, ac hendrerit sem massa ac tortor. Suspendisse viverra consectetur libero a luctus. Maecenas iaculis mi id urna fermentum condimentum viverra tellus vulputate. Suspendisse potenti. Aliquam fermentum nulla quis dolor commodo scelerisque. Donec cursus laoreet consectetur. Praesent ultricies arcu ut ante hendrerit imperdiet. Etiam at metus lectus. Aliquam ut ligula neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor scelerisque purus non sollicitudin. Sed elementum facilisis nisl, eget commodo est congue in. Etiam tincidunt viverra felis, vel tincidunt nulla pretium vel. Phasellus commodo bibendum magna et imperdiet. Aenean euismod condimentum magna eget venenatis. Pellentesque lorem eros, ornare at egestas vel, tincidunt non nunc. Quisque non diam nisl, ut consectetur metus. Fusce ipsum tortor, viverra et lobortis et, ullamcorper non magna. Duis elementum molestie sem, et ullamcorper neque eleifend non. Nunc iaculis quam eros, in pellentesque nunc. Donec tincidunt faucibus est, porta cursus eros imperdiet volutpat.</div>
</div>
</div>
</div>
<body>- 将固定高度和宽度 100% 添加到警报 + 位置：固定
- 为内容添加 padding-top
- 唯一的缺点当然是如果没有警报的话需要额外的填充......
请参阅http://jsfiddle.net/aDdRS/5/