CSS中position: fixed定位后div中内容不能滚动

最新推荐文章于 2024-04-25 15:04:32 发布
原创 最新推荐文章于 2024-04-25 15:04:32 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

博客聚焦前端CSS问题，指出设置定位后内容不能滚动的情况，并提及将给出解决方案，围绕CSS定位与内容滚动展开信息技术相关探讨。

问题描述

div设置定位后，内容不能滚动。

解决方案

.container {
	position: fixed;
	top: 116px;
	bottom: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
}
【css】问题集锦
Beam
08-20 1531
一、fixed超出窗口大小部分无法滚动 问题： 使用fixed固定一个div，当这个div高度大于窗口高度后，超出的内容无法滚动查看。 解决办法： 在设置fixed的div添加样式 height:100%;overflow:auto; 即可。 据说还可以设置样式 max-height:100%;overflow:auto; 即可。 具体还是根据情况设置当前div的宽度，若当前div宽度是个固定值不想设置成百分数，则： 可以在外层包裹一个div设置为position:fixed;height:100%;ove
CSS-position: fixed固定定位
主营前端方向，技术栈是vue
11-15 669
position: fixed固定定位(绝对定位一种，根据浏览器窗口点位不随滚动条滚动)
fixed定位既然相对于屏幕视口定位，为什么在滚动时不生效
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
03-19 1353
当你设置一个元素为fixed定位时，它的位置会相对于浏览器窗口的可视区域进行计算。因此，无论页面如何滚动，该元素都会保持在固定的位置上，不会随滚动而移动。fixed定位是一种CSS属性，用于将元素相对于浏览器窗口进行定位，而不是相对于其父元素。它会使元素固定在屏幕上的某个位置，不会随页面滚动而改变位置。示例，给搜索框固定在网页上方，但是在鼠标向下滚动时，搜索框会消失。这是内容区域的z-index比搜索框 默认的z-index大。给搜索框坐在样式加上较大的z-index即可。
解决div定位为fixed时，无法横向滚动的问题
qq_35591402的博客
11-16 2168
解决div固定定位无法横向滚动的问题
fixed定位的元素及其子元素，滚动鼠标滑轮时无法滚动！
hzxOnlineOk的博客
01-21 3452
刚碰到了一个问题，由于fixed元素是不处于文档流中的，因此，如果你的滚动容器不是html，fixed元素在非html容器中会遮住底层，此时鼠标放在fixed元素上是无法滚动容器内的内容的，所以，最好的解决方式是 都以html为容器进行滚动！ <!DOCTYPE html> <html>     <head>         <meta charset...
position: fixed; ios 无法滑动解决
weixin_30929295的博客
03-13 737
添加以下代码搞定 -webkit-overflow-scrolling: touch; overflow-y: scroll; 转载于:https://www.cnblogs.com/cxf1992/p/10524653.html
div盒子position:fixed定位后无法滚动到页面顶部了
weixin_34235105的博客
06-13 2492
2019独角兽企业重金招聘Python工程师标准>>> ...
css中position:fixed实现div居中上下左右居中
09-25
在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...
css中position:fixed实现div在窗口上下左右居中
01-21
上下左右 居中 代码如下 复制代码代码如下: div{ position:fixed;...其实，实现这个效果并不复杂，利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧： 代码如下 复制代码代码如下: <style typ
css 解决fixed 布局下不能滚动的问题
见贤思齐
05-07 4772
如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置： div { display:fixed; height:100%; overflow:scroll; } 但是这样并不会出现滚动条，正确的做法应该设置top和bottom为0： .fixed-content { top: 0; bottom:0; position:fixed; overflow-y:scrol...
解决position:fixed 不能左右拖动页面问题
w_xiaozhi的博客
09-01 1381
position: fixed导致元素不能左右滑动问题的解决
css 将div固定在页面顶部不随页面滑动
于坤
04-25 8729
为了将一个div设置为固定在页面顶部，不随页面滚动，可以使用几种不同的 CSS 技术来实现。
顶部导航栏fixed布局右侧不出现滚动条
IT学霸
06-07 2217
一、正常情况 顶部导航栏使用fixed布局后，如果页面内容超出了屏幕高度，右侧是会出现滚动条的。效果如下： 蓝色区域是顶部的导航栏区域，可以看到右侧出现了滚动条。 二、CSS代码设置后 如何让滚动条只出现在导航栏下面的内容区域了？原理就是使页面body元素和html根元素的高度固定为屏幕的高度。整个页面内容就不会让浏览器自动显示整个页面的滚动条，而在页面内部，只会让需要滚动的页面元素出现滚动条。 这种情况下，顶部导航栏只要宽度设置为100%，计算出来的宽度就是不包含滚动条的宽度值(假如屏幕宽度
div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法...
12-06 837
window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement.scrollTop); //document.getElementsByClassName('layui-m-layerchil...
微信小程序：position: fixed导致的滚动时页面元素不跟着动的问题
测试0901-1
05-25 4071
由于对js的不熟悉，花了近半个小时才解决这个问题，现在记录下： nofixed.gif 项目需要如上图所示的一个列表页面，唰唰唰...没花多长时间就完成了,在元素较少时，不需要滚动，使用一切正常； 后来添加了更多的item后，页面需要滚动，但是滚动的效果感觉莫名其妙，如下图： fixed.gif OMG？？？居然有部分元素不随着...
html为什么div移动不了,css怎么设置div不随滚动条移动？
weixin_33745224的博客
06-16 925
css怎么设置div不随滚动条移动？把一个内容固定到某一个位置 ，相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位 position 通常有 absolute 绝对定位，relative 相对定位，这个都是相对于body里面的块元素来说的，但是如果说想要吧某一个内容就国定在某一个位置，无论滚动条滑到哪里，他依然在浏览器窗口这个位置，就需要用到fixed了 。fixed 元素框的表...
解决fixed布局里内容不滚动问题
weixin_37722222的博客
09-17 1897
//注意给父级加上 (1)横向滚动 left:0; right:0; 然后想要横向滚动的话 overflow-x:scroll; overflow-y:hidden; （2）竖直方向滚动 top:0; bottom:0; position:fixed; overflow-y:scroll; overflow-x:hidden; ...
position:fixed 失效的解决方法
简析的博客
04-11 8319
今天同事问如何固定div到某个位置，不随滚动条滚动。我一听简单，用position:fixed就行了啊。 我记得position:fixed的元素 相对于屏幕视口 的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 结果并没有起作用，还是跟着滚动。怎么办？查！ 原来，在某些情况下，position:fixed会失效： 当元素祖先的 transform 属性非 none ...
css样式-内容固定在页面底部，不随滚动条滚动
热门推荐
m0_51315555的博客
09-28 1万+
css样式-内容固定在页面底部，不随滚动条滚动；position: fixed;
CSS解决position:fixed基于父元素定位而不是浏览器窗口
最新发布
11-26
另一种思路：不使用`position:fixed`，而是使用`position:absolute`，然后通过JavaScript监听滚动事件，动态更新位置，模拟固定定位。但这样性能较差。 3. 或者，我们可以将父元素设置为`position:relative`，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值