使绝对div的内容可滚动
使绝对定位的div的内容可滚动，可以通过以下步骤实现：
- 首先，确保该div的父元素具有相对定位的属性，这样可以作为参考点来定位绝对定位的div。
- 在绝对定位的div中，设置一个固定的高度和宽度，以限制内容的显示区域。
- 在该div中添加overflow属性，并设置为auto或scroll。这将创建一个滚动条，使内容在超出显示区域时可滚动。
- 如果需要水平滚动，可以添加overflow-x属性，并设置为auto或scroll。
下面是一个示例代码：
<style>
.parent {
position: relative;
height: 200px;
width: 300px;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<div class="parent">
<div class="child">
<!-- 这里放置需要滚动的内容 -->
</div>
</div>在这个示例中，父元素具有相对定位，子元素具有绝对定位。子元素设置了固定的高度和宽度，并添加了overflow属性来创建滚动条。你可以在子元素中放置需要滚动的内容。
这种方法适用于各种场景，例如在一个固定大小的弹窗中显示大量内容、在一个固定大小的侧边栏中显示长列表等。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
相关·内容
1回答
在下面的HTML中，为什么水平滚动条可见，而垂直滚动条不可见？ 这适用于Chrome、Firefox和Safari，但不适用于Edge，因为这两个滚动条都不可见。 对我来说，两个滚动条在Edge浏览器中都不可见是合乎逻辑的。 <div style="position: absolute; width: 300px; height: 300px; border: 1px solid black; overflow: auto;">
<div style="transform: translate(150px, 150px);">
浏览 8提问于2018-12-26得票数 1
回答已采纳
我有一张很宽的桌子。这就是为什么我在桌面上同时在X轴和Y轴上有滚动条的原因。
overflow-x: auto;
overflow-y: scroll;
在表格内的单元格中，我放置了一个下拉菜单。这个可以完美地工作。但是如果我打开下面一行的下拉菜单，下拉菜单就隐藏在表尾后面，我必须向下滚动才能看到它。我可以通过使表格css可见来实现这一点
overflow: visible;
然后我就把桌子上的滚动条给弄丢了。即使我有滚动条，有没有办法让下拉菜单显示出来？
浏览 1提问于2017-06-23得票数 0
我的网站是一个面向大学的课程目录工具，它有一个中心窗格，其中包含动态更新的课程列表。在Firefox、Opera和Chrome中，中心窗格具有预期的滚动行为:当类列表超过高度时，中心窗格具有滚动条。但是，只有在明确设置了高度时，IE才会显示此条。如果不使用JavaScript在调整大小时重置中心窗格高度，如何强制Internet Explorer显示滚动条？
中心窗格：
<div id="middlenav">
<div id="middleheader"></div>
<div id="cour
浏览 0提问于2009-07-07得票数 14
4回答
我有一个有大约20列和1000行的网格视图。网格被放置在<div>标签下。由于如此大的图形，div显示垂直滚动条，这很好，但它不显示水平滚动条。
为div编写的css是as；
.divCSS{
display:block;
position:relative;
width: auto;
height: 5em;
margin:0;
padding:5px;
background:inherit;
color:inherit;
overflow:auto;
}
完整的<div>代码如下；
<div id="divGrid" align="le
浏览 4提问于2011-09-08得票数 1
回答已采纳
4回答
我和position: absolute和overflow: auto有一个div。在这个div中，我有一个div，当我滚动时，它应该是粘滞的，并且应该被修复(top: 0, bottom: 0, overflow: auto)。
我可以修复此div，但我不能将其恢复到原始位置，因为当此div修复时，我无法附加scroll事件。
$('.right').scroll(function() {
if ($('.scroll').offset().top <= 0) {
$('.scroll').css({
浏览 2提问于2015-05-12得票数 15
3回答
我有一个div，它是x-滚动的，在这个div中，我有一个固定大小的div，它包含头部数据，还有一个div，它调整到包含与标题匹配的内容的页面大小。
外部div是x-滚动的，因此标题与包含的数据一起滚动。数据是y-可滚动的，以允许长的数据列表。
但是，问题是数据的滚动条是不可见的，除非页面完全向右滚动。
html：
<div id="outerContainer">
<div id="xScroll">
<div id="Header">fixed height header
</div&
浏览 2提问于2014-06-11得票数 2
回答已采纳
为什么在元素上设置overflow: auto;并不会导致它在内容溢出时滚动？
我有一个固定的左列和滚动的右列的两列布局。右边的列设置为overflow: auto;，它有一个子div.content。如果设置它的最低高度比窗口高，滚动条将不会出现。如果我在它的子上设置最小高度，就会出现div.content滚动条。
为什么会这样呢？为什么在main上设置最小高度时不显示滚动条
这里有一个小提琴：
<div class="page-wrapper">
<aside>
<p>Fixed</p>
<
浏览 0提问于2013-11-29得票数 1
回答已采纳
我有在这里显示的问题，我是facing.Basically我正在尝试做一个中间的div元素的滚动条，有所有三个div的适合页面。
如果我将其用作html页面，这种方法效果很好，但是当我在ui-view中使用它时，'# content - scroll‘中的内容不会显示，如果我从CSS中删除position:absolute，它会显示，但不会显示滚动条。
基本上我只是想知道如何才能显示内容？
如何解决这个问题？
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: au
浏览 0提问于2016-06-05得票数 0
5回答
比方说，我有两个这样的divs：
<body>
<div id="header">
MY CONTENTS
</div>
<div id="main">
MY OTHER CONTENTS
</div>
</body>
第一个div在CSS中具有position:fixed;和width:100%;属性，另一个div只是一个div，里面有很多内容。
好的，和往常一样，右边有一个滚动条。但是这个滚动条会影响到所有的divs。我希望
浏览 2提问于2012-07-16得票数 4
回答已采纳
2回答
我正在尝试一个旋转的产品，这些产品部分在屏幕之外，可以滚动，以模拟移动设备的一个组件。
滚动条不会到达产品-旋转木马类的末尾，但是如果我删除卡类中隐藏的溢出，我可以看到在父div的底部有一个滚动条可以正确地工作。我想把这种行为转移到旋转木马上。
我需要做什么才能看到旋转木马下正确的滚动条而不是父div？滚动父div结果显示背景，我只想让产品向左/右滑动。
滚动条不考虑溢出
旋转木马有正确的宽度
删除卡父级溢出后，将显示正确的行为，但对于父级(参见底部的小滚动条)。
<div class="cards">
<div cla
浏览 0提问于2020-05-07得票数 0
回答已采纳
2回答
我有一个小的网页应用程序，我正在设计，我有一个非常奇怪的问题。内部内容总是在页面折叠下面剪掉--你不能向下滚动来阅读所有的文本。我已经在Mobile和Chrome/Firefox的桌面上尝试过这一点，但没有成功。
活动网址是
任何我能尝试的建议都会有很大帮助。我基本上有ID #content的div，它保存白色BG和页面文本。我得到了overflow: auto;，它应该在这个div中创建滚动条，甚至有height: 100%;。我完全搞不懂这个问题是什么--再次感谢你的帮助！
浏览 9提问于2012-04-18得票数 1
回答已采纳
3回答
我有一个jqGrid，它使用比对话框高度更长的表单添加/编辑对话框，但是对话框不会滚动。我尝试在对话框中添加overflow: auto样式，但没有效果：
$("div.ui-jqdialog-content").css("overflow", "auto");
不过，如果我将auto更改为scroll，至少会看到滚动条，但仍然没有滚动：
$("div.ui-jqdialog-content").css("overflow", "scroll");
这至少给了我一线希望，希望我走在正确的轨道上。
A
浏览 0提问于2010-05-21得票数 1
回答已采纳
1回答
只滚动子元素
、、
我只想在儿童部设置滚动。我用overflow-y: hidden;固定了父div的高度，但是使用overflow-y: scroll;滚动更高的子div。
但是，这显示了通过子div的Y轴禁用的滚动条.我怎样才能使它只使用CSS？如果没有，有什么jQuery方式吗？
下面是我目前正在使用的代码：
<div class="parent">
<div class="child">
<!-- Content -->
</div>
</div>
此外，CSS：
.parent {
浏览 4提问于2014-05-28得票数 1
回答已采纳
3回答
下面的示例显示了一个具有box内容的:after div，它应该是一个单独的块。
div.box {
background-color: #FAA;
width: 10em;
overflow: scroll;
}
div.box:after {
content: "☑";
display: block;
background-color: #AFA;
width: 5em;
overflow: auto;
}
<div class="box">x</div>
但是，
浏览 6提问于2015-02-12得票数 3
回答已采纳
2回答
我试图在我的项目上设置一个无限滚动，但要使overflow-y: auto; css属性工作起来有困难。以下是我目前的布局：
我使用以下CSS/HTML代码创建它：
<div class="flex-items">
<div v-for="game in gamesData.games" class="card-spacing">
<!-- Contents -->
</div>
</div>
.flex-items {
flex:
浏览 5提问于2020-11-14得票数 0
回答已采纳
2回答
当我调整窗口的大小时，只会出现水平滚动条。其他的材料不再适合在窗口(垂直)，只是“消失”在窗口顶部，作为一个背景图像。我怎么才能让它正常工作呢？我已经尝试了我所知道的一切，总是出了问题(如果我让滚动条的事情起作用了，其他的事情就不会发生了)。页面应该如下所示：
CSS:
body {
background-color: black;
overflow: scroll;
}
header {
left: 400px;
bottom: 640px;
position: absolute;
}
section {
overflo
浏览 3提问于2015-01-23得票数 1
是否可以在高度设置为auto的div上使用overflow: scroll？
我有一个包含无序列表的div。列表中项目的数量是可变的，所以我不可能使用固定的高度。包含无序列表的div是滚动条需要的位置，下面是我的代码：
#page {
height: auto; /* default */
overflow-y: scroll;
overflow-x: hidden;
}
如上所述，无序列表包含在#page div中。页面的高度由无序列表的值指定。有没有办法让overflow: scroll在像这样高度可变的div上工作，或者我必须使用JavaScript来做这件事？
浏览 0提问于2013-06-29得票数 2
回答已采纳
1回答
CSS Div位置行为
、、、
我在理解div位置(相对、绝对、固定)属性时遇到了问题。我基本上有一个绝对的div居中。在div中，应该可以垂直和水平滚动。在这个div里面应该是一个固定的标题，它的宽度大于屏幕( overflow )，还有一个内容div，它在垂直和水平方向上都有溢出。
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(10
浏览 2提问于2016-05-21得票数 0
8回答
是我使用的引用，它解释了如何使div滚动并隐藏它的滚动条。唯一的区别是我有嵌套的div。检查我的
HTML:
<div id="main">
<div id="sub-main">
<div id="content">
<div id="item-container">
<div class="item">a</div>
<di
浏览 0提问于2014-04-25得票数 13
回答已采纳
我的容器div没有扩展到适合它的子div -它有一个top: 20px值。我甚至没有浮点数，并且使用了overflow:hidden (裁剪子div的一部分)或overflow:auto (创建滚动条)。
请参阅代码示例：
<div class="container">
<div id="model">fdsf</div>
</div>
感谢对这个问题的任何解决方案。
浏览 1提问于2016-03-31得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
