首页
学习
活动
专区
工具
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
  • 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,不定期分享原创知识;想要获取更多完整鸿蒙最新学习知识点,关注

    11920

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

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

    1.8K00

    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

    一文吃透 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属性定义了多根轴线的对齐方式

    60410

    CSS StickyFooter——当内容不足一屏footer紧贴底部

    所以这里我们来探讨下当内容不足一屏footer也要紧贴底部的情况,因为比较难以描述,所以干脆使用了英文标题,要实现的效果如下: 第一个和第三个为正常处理的情况,第二个和第三个是我们要实现的情况 ?...设置最小高度100% */ position: relative; /* 设置最小高度100% */ box-sizing: border-box; /* 设置盒模型为border-box...,那样这个100%包括了下面的padding-bottom高度 */ padding-bottom: 120px; /* 高度为footer的高度 */ } .footer{ position...主要思路是设置flex的方向为垂直方向,然后设置内容占满其余的空间 html代码如下: <div class="container...: 1; /* 内容<em>占满</em>所有剩余<em>空间</em> */ }

    1.7K70

    CSS StickyFooter——当内容不足一屏footer紧贴底部

    所以这里我们来探讨下当内容不足一屏footer也要紧贴底部的情况,因为比较难以描述,所以干脆使用了英文标题,要实现的效果如下: 第一个和第三个为正常处理的情况,第二个和第三个是我们要实现的情况 ?...设置最小高度100% */ position: relative; /* 设置最小高度100% */ box-sizing: border-box; /* 设置盒模型为border-box...,那样这个100%包括了下面的padding-bottom高度 */ padding-bottom: 120px; /* 高度为footer的高度 */ } .footer{ position...主要思路是设置flex的方向为垂直方向,然后设置内容占满其余的空间 html代码如下: <div class="container...: 1; /* 内容<em>占满</em>所有剩余<em>空间</em> */ }

    1.2K10

    革命性创新,动画杀手锏 @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.5K20

    Flutter | Slivers 系列

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

    1.5K11

    css属性及定位操作

    display:”block” 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。...给.container设置固定高度,一般情况下文字内容不确定多少就不能设置固定高度,所以一般不能设置“.container”高度(当然能确定内容多高,这种情况下“.container是可以设置一个高度即可解决覆盖问题...或者给.container加一个固定高度的子div: 固定高度解决方案(推荐使用) 以上方案可以解决但是会使得页面操作不灵活 推荐使用 解决方案二 清除浮动(推荐使用) clear语法:...fixed(固定) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动,对象不会随着滚动。...因为它原本所占的空间仍然占据文档流。 在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 <!

    2.4K50

    一点点css的基础原理总结

    所有的元素,在CB里面参与高度计算。对于脱离文档流的float、absolute、fixed,父元素无法识别他们,也参加高度的计算,所以float的时候会导致父元素高度坍塌。...所以,我们平时width100%就是占满全部,auto就是占满剩下的内容,而height100%有时候设置了也没有用。 height没用的时候,因为他的父元素是0或者被默认是0。...比如一个div,直接设置高100%,他是0,但是你用一个已知高度的div包住他,这时候他的百分比就有用了。...,用bfc解决 1.父子盒子margin越界问题 而BFC可以解决这个问题,由bfc的特点:一个独立容器(甚至可以说是一个独立的margin-box),当然不会无缘无故地穿透父盒子 2.float父元素高度坍塌...每一种字体,已经确定了自身相应的高度,不同字体可能有很细微的差别。于是,我们可以设置line-height:1(或者100%),这样子就可以让字体饱满地填充块高。 5.

    66810

    一点点css的基础原理总结0.前言1.包含块(CB)2.宽和高3.BFC4.行内元素5. 垂直方向的margin6.盒子模型

    所有的元素,在CB里面参与高度计算。对于脱离文档流的float、absolute、fixed,父元素无法识别他们,也参加高度的计算,所以float的时候会导致父元素高度坍塌。...所以,我们平时width100%就是占满全部,auto就是占满剩下的内容,而height100%有时候设置了也没有用。 height没用的时候,因为他的父元素是0或者被默认是0。...比如一个div,直接设置高100%,他是0,但是你用一个已知高度的div包住他,这时候他的百分比就有用了。 auto、百分比,都由CB(包含块)决定 ?...2.float父元素高度坍塌、兄弟元素重叠 前面我们已经看见,父元素高度为0。因此,我们把父元素变成BFC,那就可以实现我们想要的结果——父元素包含一堆子元素 ?...每一种字体,已经确定了自身相应的高度,不同字体可能有很细微的差别。于是,我们可以设置line-height:1(或者100%),这样子就可以让字体饱满地填充块高。 5.

    72220
    领券