首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

高度100%可滚动时不占满空间

是指在网页布局中,当内容区域的高度设置为100%并且内容超出容器高度时,容器不会自动撑开,而是显示滚动条,使用户可以滚动查看全部内容。

这种布局方式常用于需要固定头部或底部的页面,以确保页面的其他部分不会被内容区域撑开,同时保持页面整体的美观和一致性。

优势:

  1. 美观性:通过固定头部或底部,页面布局更加整洁,不会因为内容过多而导致页面混乱。
  2. 用户体验:用户可以自由滚动查看内容,不会受到页面高度的限制,提升了用户的浏览体验。
  3. 响应式设计:适用于不同设备和屏幕尺寸,可以在移动设备上自适应显示。

应用场景:

  1. 博客或新闻网站:在文章内容较长的情况下,可以使用高度100%可滚动的布局,确保页面整洁,同时提供良好的阅读体验。
  2. 后台管理系统:在数据展示较多的后台管理系统中,可以使用该布局方式,保持页面的整洁性,方便用户查看和操作数据。

推荐的腾讯云相关产品: 腾讯云提供了一系列的云计算产品,以下是其中一些与网页布局相关的产品:

  1. 腾讯云云服务器(CVM):提供可扩展的虚拟服务器,可用于搭建网站和应用程序。
  2. 腾讯云对象存储(COS):提供高可靠、低成本的对象存储服务,可用于存储网页中的静态资源。
  3. 腾讯云内容分发网络(CDN):加速静态资源的传输,提供更快的访问速度和更好的用户体验。

更多腾讯云产品信息和介绍,请参考腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

响应式图像

处理高度的时候,vh单位更好。 1. 占满宽度的元素: % > vw 正如我所提到的,vw单位根据视窗的宽度决定它的大小。然而,浏览器是根据浏览器的窗口计算视窗大小的,包括了滚动条的空间。...如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。 因此,如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...占满高度的元素:vh > % 在另一方面,当使一个元素跨越整个页面的高度时,vh远比百分比单位好。...滚动条的问题也不是一个问题,因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片,不管设备的大小。...: 100vh; } 占满全屏的内容块像“多页面”一样 section { width: 100%; height: 100vh; } ?

2.5K10
  • 鸿蒙开发实战案例:视频卡片和列表区域的联动滚动思路

    视频卡片点击上一条、下一条时,通过List的滚动控制器控制列表滚动到指定位置,视频卡片不发生滚动。点击列表项,列表发生滚动,视频卡片不滚动。...: this.scroller }) { ... } .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, // 可滚动组件往末尾端滚动时的嵌套滚动选项...scrollBackward: NestedScrollMode.SELF_FIRST // 可滚动组件往起始端滚动时的嵌套滚动选项,自身先滚动,自身滚动到边缘以后父组件滚动。...})为了实现视频卡片的吸顶效果, Scroll 容器的内容高度使用 calc 计算属性设置为 Scroll 容器高度和视频高度的和,使 Scroll 滚动到尾部边缘时,视频隐藏,视频卡片吸顶。...)`) }新闻列表组件设置 layoutWeight 为1,使列表自动占满 Scroll 内容的剩余空间,当视频卡片吸顶时新闻列表可以完全显示,并且当新闻标题改变导致卡片高度发生变化时,新闻列表组件高度也相应变化

    10110

    学前端到了CSS阶段,你一定要掌握这9大防御式开发技能

    但是这里更推荐将 6、场景六:预留滚动条空间,避免重排当内容不足时不会出现滚动条,文字占据的宽度要宽些。...当内容溢出出现滚动条时,因为滚动条要占据一部分空间,则会造成文字占据的空间变窄,因而会造成重排。我们可以元素添加scrollbar-gutter:stable;来避免这个问题。...当内容溢出出现滚动条时,因为滚动条要占据一部分空间,则会造成文字占据的空间变窄,因而会造成重排。...auto-fit:网格的最大重复次数(正整数),如果有剩余空间,网格项平分剩余空间来扩展自己的宽度。以下情况只会出现在子项内容不能占满一行时。...也就是说万一内容不能占满一行,则使用auto-fill就会出现空白问题。

    1.8K00

    css精髓:这些布局你都学废了吗?

    ,中间内容区域宽度较小不占满屏幕。...; height: 600px; background: red; margin: 0 auto; } 单列布局是最为基础和简单的一种,实现方法并不局限于以上两种,大家可自由发挥,找到更多的方法来实现。...当页面高度小于浏览器高度时,下部分应固定在屏幕底部;当页面高度超出浏览器高度时,下部分应该随中间部分被撑开,显示在页面最底部。...每一个页面都要重新计算一次,这是很麻烦的,所以这种方法虽然简单但却是不推荐的。 使用flex布局 这种方法就是利用flex布局对视窗高度进行分割。...如果不设置背景色(背景透明),正常文档流的文字就会和标题行文字重叠在一起显示。

    1K30

    ArkUI滚动类组件-Grid、GridItem

    : Scroller): GridAttribute;}scroller:绑定一个滚动控制器,控制 Grid 的滚动。...rowsTemplate:设置列数,默认值为 1fr ,表示 1 行,不设置时默认为 1 行,参数说明和 columnsTemplate 一致。columnsGap:设置列与列的间距。...forceRebuild:用于设置在触发组件 build 时是否重新创建此节点。...columnsTemplate("1fr 1fr 1fr 1fr") // Grid宽度均分成4份 .rowsTemplate("1fr 1fr 1fr 1fr 1fr") // Grid高度均分成...写在最后如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:点赞,转发,有你们的 『点赞和评论』,才是我创造的动力;关注小编,同时可以期待后续文章ing,不定期分享原创知识;想要获取更多完整鸿蒙最新学习知识点,可关注

    13920

    TDesign 更新周报(2022年7月第1周)

    Form: 修复 number 规则校验不生效的问题Table:动态数据合并单元格,删除行数据时,未更新合并单元格状态修复自定义筛选组件不显示问题ColorPicker: 修复颜色选择器样式异常ConfigProvider...form.onSubmit 回调函数导致的 scrollToFirstError 参数失效的问题DatePicker: 修复 clearble 响应式问题Dialog: 修复滚动失效问题Table:...NaN 问题Select: 修复多选下换行提前占满一行的问题Select: 修复 input 高度 height 100% 导致换行高度异常的问题Pagination: 修复如果页面总数变更后当前页数不变的问题...修复滚动失效问题select: 修复多选下换行提前占满一行的问题Upload: 修复 disabled 依然可删除问题colorPicker: 修复在 ColorTrigger 输入色值时,自动format...NoticeBar: 修复公告不滚动问题Dialog: 修复点击遮罩层不会触发 close 事件的问题详情见:https://github.com/Tencent/tdesign-miniprogram

    2.3K10

    图片横向等高瀑布流,每行占满,限制行数 的实现

    图片的横向瀑布流,其实简单地按顺序排列就可以了 但要实现每行中各图片都等高(各行不一定等高,但每行里面等高),且每行都占满,就需要用到flex的特性了 控制每行图片高度都一致,可能会影响图片的比例,所以不能简单暴力地设置高度...,或者手动定义 使用flex-grow可以分配按比例分配主轴的剩余空间 如果有10张图片需要放置,第一行仅可以放置四张图片,剩余100px的空间,那么各图片的flex-grow可以直接配置成图片的宽度width...padding-top 的百分比值 我们都知道  padding-top 的百分比值是基于父元素的宽度来计算的,根据盒模型,一般这种计算方式是为了获取固定宽高比 当父元素有宽度,但高度为0时,整体高度则由...图片宽度的不同,就直接导致了最终高度的不同 所以,为了确保图片高度一致,假设有三张图片 50*50  100*100  50*150  放在了同一行中,flex布局会将三张图片所在容器的高度自适应为最高的那个...还要一个问题,如何实现只显示三行 显示三行,每行的图片数量不固定,这是通过flex布局自动排列每一行的,都会经过 基本排列 -> 分配剩余空间 的步骤 目前想到的方法是对每一行的容器所占位置进行累加,最后对比即可

    2K60

    弹性(Flex)布局的使用

    默认的是stretch,即轴线占满整个交叉轴。...3、超出隐藏,overflow失效 问题: text-overflow: ellipsis;不生效,省略号没有出现,而且过长的文字把子容器撑开,没有按预设的超出隐藏。 ?...解决方法: 设子容器width:0;可能出在于子容器没有设置宽度,省略符可能需要对父元素设置宽度,设置为100%无效,当设置为0的时候,子容器恢复到设定的宽度,省略号也出现了。...设置为0时,不会自动增长/缩小,防止固定大小的元素宽度发生变化。...5 flex布局滚动,子元素无法全部显示 问题: 父级使用flex布局,列表页设置flex:1;占满空闲空间,但是所有的列没有完全显示出来,滚动条也没有出现。 ?

    2.1K10

    【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】

    } ListItem(){ HomeProduct() } } .layoutWeight(1) .backgroundColor(Color.White) List 组件作为一个可滚动的列表容器...Grid 设置了宽度、高度占满父容器,以及行列模板,定义了一行四列且均匀分配空间的布局形式。...(nestedScroll),用于处理滚动行为,比如规定了向前滚动(scrollForward)和向后滚动(scrollBackward)时采用的滚动模式(分别是 PARENT_FIRST 和 SELF_FIRST...,涉及到和父容器滚动交互等情况)。...外层的 Column 设置了高度和宽度占满父容器,而最外层的 Stack 同样设置了宽度和高度占满父容器,并且添加了一定的内边距(padding(5))以及内容对齐方式为底部对齐(alignContent

    14510

    【HarmonyOS应用开发——ArkTS语言】购物商城的实现【合集】

    } ListItem(){ HomeProduct() } } .layoutWeight(1) .backgroundColor(Color.White) List 组件作为一个可滚动的列表容器...Grid 设置了宽度、高度占满父容器,以及行列模板,定义了一行四列且均匀分配空间的布局形式。...(nestedScroll),用于处理滚动行为,比如规定了向前滚动(scrollForward)和向后滚动(scrollBackward)时采用的滚动模式(分别是 PARENT_FIRST 和 SELF_FIRST...,涉及到和父容器滚动交互等情况)。...外层的 Column 设置了高度和宽度占满父容器,而最外层的 Stack 同样设置了宽度和高度占满父容器,并且添加了一定的内边距(padding(5))以及内容对齐方式为底部对齐(alignContent

    10900

    一文吃透 CSS Flex 布局

    auto,将占满整个容器的高度 (1)flex-start: 交叉轴的起点对齐(上面或左边)。...设置容器高度为 100px,项目高度分别为 20px、40px、60px、80px、100px,效果如图所示: (2)flex-end: 交叉轴的终点对齐(下面或右边)。...设置容器高度为 100px,项目高度分别为 20px、40px、60px、80px、100px,效果如图所示: (3)center: 交叉轴的中点对齐。...设置容器高度为 100px,项目高度分别为 20px、40px、60px、80px、100px,效果如图所示: (4)stretch: 默认值、如果元素未设置高度或设为auto,将占满整个容器的高度...假设容器高度设置为 100px,而项目没有设置高度,则项目的高度也为 100px: (5)baseline:以元素的第一行文字的基线对齐 align-content align-content属性定义了多根轴线的对齐方式

    65410

    革命性创新,动画杀手锏 @scroll-timeline

    #g-content,它的高度是 170vh,也就是可视界面高度的 1.7 倍,并且把 #g-box 容器放置在一个距离顶部 70vh 高度的地方: 有意思的来了,我们设置的旋转动画不会自动开始,只有当我们向下滚动的时候...: auto:绑定到 Document,也就是全局 Windows 对象 source: selector("id-selector"),通过 selector(),内置一个 #id 选择器,选取一个可滚动容器...source: none:不指的滚动容器 orientation:设定滚动时间线的方向 orientation: auto:默认为 vertical,也就是竖直方向的滚动 orientation:...例如,如果 ananimation-duration 设置为 2s 且滚动偏移量为 0px, 30px, 100px,则在 1s 时,滚动偏移量将为 30px。...,就是动画的开始时间都是从滚动一开始就开始了,刚好在滚动结束时结束。

    1K21

    Flutter | 滚动组件,ListView,GridVIew等

    可滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接的包含一个...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 ,如 false 时,初始位置在头,反之则在 尾 primary:指是否使用 widget 树中默认的 PrimaryScrollController...,被包裹的可以避免列表重绘,但是列表重绘的开销非常小(如一个颜色块,或者一个较短的文本) 时,不添加 RepaintBoundary 反而会更加高效。...可滚动组件的 Sliver Sliver 通常指的是可滚动组件的子元素。...版的可滚动组件和 非 Sliver 版的组件最大的区别就是前者不包含滚动模型(自身不能滚动),而后者包含滚动模型。

    8.7K20

    Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动的容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动的列表,如 Appbar, 列表,网格...SliverFillViewport 它也接受一个 delegate,支持动态的加载,只不过内部的子元素会占满整个屏幕 SliverFillViewport( delegate: SliverChildListDelegate..., ), ), ) 复制代码 SliverFillRemaining 该组件会填满当前页面的剩余空间 SliverFillRemaining( hasScrollBody: false,...child: Center( child: CircularProgressIndicator(), ), ) 复制代码 hasScrollBody :当前组件中是否有可滚动的组件..., ); } } 上面代码中有一个问题,本来使用了 stretch 属性之后,在下拉的时候应该会有一个放大的效果,但是运行代码的时候并没有,有知道原因的同学可以讲一下 参考:B站王叔不秃

    1.5K11
    领券