Header div stays at top, vertical scrolling div below with scrollbar only attached to that div(标题 div 保持在顶部,垂直滚动 div 下方,滚动条仅附加到该 div)
问题描述
我有 2 个主要的 div,标题和一个包含在 div 中的滚动列表.我希望标题始终保留在页面顶部,以及下面的滚动列表.滚动条应该附加到滚动的div而不是整个页面,即滚动条不会出现在标题的右侧,只是滚动的div.
I have 2 main divs, the header and a scrolling list contained in a div. I want the header to always remain at the top of the page, and the scrolling list below. The scrollbar should be attached to the scrolling div and not to the whole page, i.e. the scrollbar does not appear on the right of the header, just the scrolling div.
这就是我想要实现的目标:
This is what i'm trying to achieve:
______________________
|_______header_______|
| |*|
| Container Div |*|
| |*|
| |*|
| |*|
| |*|
| |*|
----------------------
* = scrollbar
布局应该是流畅的,如果窗口垂直拉伸,只有容器 div 和它的滚动条应该变长.
The layout should be fluid and if the window is stretched vertically, only the container div and it's scrollbar should get longer.
我不想将标题 position: fixed;
放置在这样的位置,因为滚动条将位于它的右侧而不是它的下方.
I don't want to position the header position: fixed;
as then the scrollbar will be on the right of it instead of underneath it.
推荐答案
HTML:
<div class="header">This is the header</div>
<div class="content">This is the content</div>
CSS:
.header
{
height:50px;
}
.content
{
position:absolute;
top: 50px;
left:0px;
right:0px;
bottom:0px;
overflow-y:scroll;
}
这篇关于标题 div 保持在顶部,垂直滚动 div 下方,滚动条仅附加到该 div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:标题 div 保持在顶部,垂直滚动 div 下方,滚动条


基础教程推荐
- 检查 HTML5 拖放文件类型 2022-01-01
- Bootstrap 模态出现在背景下 2022-01-01
- 如何添加到目前为止的天数? 2022-01-01
- fetch 是否支持原生多文件上传? 2022-01-01
- Bokeh Div文本对齐 2022-01-01
- 在 contenteditable 中精确拖放 2022-01-01
- 原生拖动事件后如何获取 mouseup 事件? 2022-01-01
- 即使用户允许,Gmail 也会隐藏外部电子邮件图片 2022-01-01
- npm start 错误与 create-react-app 2022-01-01
- Fabric JS绘制具有活动形状的多边形 2022-01-01