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

将100vh高度保留在带有溢出的父级中

是一种常见的前端开发问题。通常情况下,当一个元素设置了100vh(视口高度)作为其高度时,它将占据整个视口的高度。然而,如果该元素的父级存在溢出(overflow)属性的设置,例如"overflow: scroll",那么元素的高度将会超过视口的高度,因为它将考虑到父级元素的滚动条。

为了解决这个问题,可以采用以下方法之一:

  1. 使用calc()函数:可以通过在设置元素高度时使用calc()函数来计算视口高度减去父级元素滚动条高度的值。例如,可以使用以下CSS规则设置元素的高度:
代码语言:txt
复制
.element {
  height: calc(100vh - 20px); /* 假设父级元素的滚动条高度为20像素 */
}
  1. 使用绝对定位:可以将元素的位置设置为绝对定位,并相对于视口进行定位。然后使用top、bottom、left和right属性来调整元素的位置,以保持与父级元素的溢出无关。例如:
代码语言:txt
复制
.element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这些方法都可以确保元素在具有溢出的父级中保持100vh的高度,同时避免受到父级滚动条的干扰。

对于相关的腾讯云产品和介绍链接,可以参考以下推荐:

  1. 腾讯云云服务器(CVM):可提供稳定、安全、可扩展的云计算资源。详细信息请参考腾讯云云服务器产品介绍
  2. 腾讯云容器服务(TKE):基于Kubernetes的容器管理服务,可快速构建、部署和管理容器化应用。详细信息请参考腾讯云容器服务产品介绍
  3. 腾讯云对象存储(COS):安全、稳定、高可用的云端存储服务,适用于多种应用场景。详细信息请参考腾讯云对象存储产品介绍

请注意,以上只是示例推荐,并不代表对其他任何品牌的云计算产品的贬低或推荐。

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

相关·内容

「译」Flexbox 基本原理

项目不会依靠伸展来适应整个宽度(主轴),相反,它们采用收缩的方式 ? 项目将会伸展以适应交叉轴(在这个例子中是高度)。如果各个项目的高度不同,它们将会伸展至与最高的那个项目等高。...flex-basis 默认值为 auto(项目宽度将取决于其自身的内容) flex-wrap 默认值为 nowrap(如果容器的宽度不足以囊括所有的项目,则项目不会换行,只会溢出) 出于可视化的目的,我们拉伸容器以占据整个高度...但是为什么弹性项目会占据整个屏幕的高度呢?在第一部分,容器高度被设置为 100vh,因此可用空间被这四行平分以适应 300px 的项目。...假如我们没有设置 100vh,则容器高度将等于项目内容的高度,如下图所示 [1]: ? 另一个选项是 wrap-reverse,它将会反转交叉轴。...如果设置了容器高度,则 stretch 属性值会使所有的项目伸展至与容器等高;如果没有设置,则所有项目与最高的项目等高 [5]。上面第一张图片中容器高度设置为 100vh,第二张图片则没有设置高度。

2K30
  • 前端项目知识点总结

    前端总结 html 字体图标的引用 添加到项目 项目下载到本地 加font文件夹,将字体文件放进去 将css文件加入到link中 雪碧图 先用一个 span 标签 将span标签display...:inline-block 设置图标的background-position 外边距合并的问题 父元素没有边界线, 无法构成盒子模型 此时调子元素的margin值, 父子元素都会改变出错 解决方法...: 给父元素加属性 overflow:hidden; 标签 for 属性应当与相关元素的 id 属性相同 css 宽度和高度的自适应函数 calc(100vh - 60px)函数可以用来计算css的数值...初始化 可以把项目中各个部分都要用的部分提出来放在初始化的commons.css中 把握整个页面的情况, 将可复用的部分写在初始化样式中 初始化的时候直接加上 box-sizing: border-box...选择器 id选择器优先级太高, 在css中最好少出现 垂直居中 调节图片和文字的垂直: vertical-align:middle 图片下面有空隙的问题 vertical-align:top;

    90120

    弹指间,重温几个设置满屏的小技巧

    因为CSS里部分属性是继承父级而来的,height就是其中之一,当前html标签height为0,自然而然body100%也为0。...vh单位定义为视窗高度的百分比,那岂不是esay? body{ height:100vh; } 搞定,大功告成!...浏览器中100vh这个方案都是不完美的,都出现了滚动条,并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh中,是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一,而后Google浏览器也效仿它。...,一旦更新--vh的值,我们的界面将发生重绘,体验是十分不好的,应该尽量避免此类骚操作。

    1.2K20

    css视口单位vw,vh的妙用(embed篇)

    只需级行css就解决了 核心css代码,锁死视频比例16:9 embed { height: calc(9 * 100vw/ 16);width: 100%; } 宽度设置为100%,宽度铺满父级div...【假设父级div就是真个屏幕】,高度设置为屏幕的宽度乘以9/16。...因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的div也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...本来,文章写道这里就应该结束了,但是突然想到了香菇社长那个超宽的屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕的高度。 怎么办呢?想了一下,觉得这样比较简单!...在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的

    1.1K30

    CSS | 视差滚动 | 笔记

    视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height:100% 铺满父容器的高度 height:100vh 铺满屏幕(viewport)的高度 "100vh...vh 是 css 中的一个相对长度单位, 是相对于视窗的高度, 100vh 就是指 元素的高度等于当前浏览器的视窗高度, 即浏览器内部的可视区域的高度大小。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分,而是将 100vh 设置为隐藏地址栏的浏览器高度。...结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...当页面加载时,将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。 如果地址栏是可见的,那么 window.innerHeight 是全屏的高度。

    81521

    建议收藏!总结了 42 种前端常用布局方案

    对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了。...;淡紫色是子级,相对于父级居中的。...实现CSS代码如下: .parent { /* 为父级容器设置行高 */ line-height: 500px; } .child { /* 将子级元素设置为 inline-block 元素...行内块级水平垂直居中方案 步骤如下: 容器元素行高等于容器高度 通过 text-align: center; 实现水平居中 将子级元素设置为水平块级元素 通过 vertical-align: middle...通过position实现 实现步骤 左右两列脱离文档流,并通过偏移的方式到达自己的区域 使中间自适应的宽度为父级容器减去两个定宽的列 通过外边距将容器往内缩小 实现CSS代码如下: .left {

    4.2K30

    建议收藏!总结了42种前端常用布局方案

    ;淡紫色是子级,相对于父级居中的。...行内块级元素垂直居中 若元素是行内块级元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并让父元素行高等同于高度。...实现CSS代码如下: .parent { /* 为父级容器设置行高 */ line-height: 500px; } .child { /* 将子级元素设置为 inline-block 元素...行内块级水平垂直居中方案 步骤如下: 容器元素行高等于容器高度 通过 text-align: center; 实现水平居中 将子级元素设置为水平块级元素 通过 vertical-align: middle...通过position实现 实现步骤 左右两列脱离文档流,并通过偏移的方式到达自己的区域 使中间自适应的宽度为父级容器减去两个定宽的列 通过外边距将容器往内缩小 实现CSS代码如下: .left {

    4.2K30

    【面试题解】什么是浮动?有什么应用?有什么影响?如何清除浮动?

    并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。...父元素高度塌陷 父元素的高度默认是由子元素的高度撑起来的,所以我们的父元素 float-container 的高度应该是五个box的高度加起来,也就是 320px 。...原因是当子元素脱离标准文档流以后,父元素的高度就没有了,从而造成父元素高度塌陷现象。 影响了兄弟元素 因为浮动元素脱离了标准文档流,所以其他元素就会占据浮动元素原来的位置,影响布局。...影响了叔叔元素 因为父元素的高度塌陷了,所以叔叔元素的布局也会受到影响。 如何清除浮动 父级元素也浮动 我们给浮动元素的父元素也设置个浮动。...空块元素结合clear属性 我们在父级元素的结束标签之前添加一个空的块级元素,然后添加 clear: both 属性,可以达到清除浮动的目的。

    64610

    CSS第五天-定位

    CSS第五天-定位 静态定位:static 定位的默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来的位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...=== 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流的父元素设置 宽度和margin:0 auto 定位元素 === left: 50% translateX(-...:x y 合并成一张大图片,这张大图片称之为精灵图 减轻服务器的压力,提高页面加载速度 ---- 背景图片大小:background-size background-size:宽度 高度 /百分比 contain...- 垂直的用法: 文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框,文本框无法贴顶问题 div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题 使用line-height

    2.7K40

    HTML和CSS常见问题整理

    值 描述 flex 设置弹性容器 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。...同一级别:后写的会覆盖先写的。...一个块级元素如果没有设置height,其height由子元素撑开,对子元素使用了浮动之后,子元素就会脱离文档流。那么父元素中没有内容撑开其高度,这样父元素的height就会被忽略。...需要放到后面,将左右两边使用absolute定位,因为绝对定位使其脱离文档流,最后面的center会显示在正常文档流中,然后设置margin属性,留出左右两边的宽度。...,使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时,可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度,视窗高度是100vh vw 相对于视窗的宽度

    1.5K30

    overflow:hidden作用能治住塌陷_html溢出隐藏代码

    一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。... 效果如下: 一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。...overflow:hidden 清除浮动 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。...当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。...因此,需要给父级加个overflow:hidden属性,这样父级的高度就随子级容器及子级内容的高度而自适应。

    1.9K30

    响应式网站应该如何选择 CSS 单位?

    百分比 用于设置元素的宽度时,它总是相对于其直接父元素的大小。如果没有定义的父级,则默认情况下 body 会被视为父级。...em em 总是相对于它的直接父级的字体大小。1em == 父字体大小的大小。如果没有覆盖,默认字体大小为 16px,假设在父元素中字体大小为 48px,然后在子元素中为 1em == 48px。...因此,元素 font-size 会根据设备大小而变化,元素周围的间距也将分别发生变化。 rem r 代表根 em,与 em 不同,它总是相对于根字体大小,无论它的下一个父元素具有什么字体大小。...让我们考虑以下示例,其中一个子元素的高度与父级大小有关,而另一个子元素的高度与根相关。...% 相对于父级的宽度单位。 相对于元素字体大小的边距和填充的 em 单位。 相对于根的字体大小的 rem 单位。 vw 和 vh 表示相对于根的宽度和高度。

    1.9K10

    掌握这些CSS知识点,Coding如飞!

    高度100%并未铺满屏幕 代码&效果:https://codepen.io/DYBOY/embed/RwoJKRP block类的父级(包含块)是body,body在未设置值的时,height值为auto...盒子的高度无效,height为0,即在浏览器上无渲染高度 浏览器的渲染规则可理解记忆为:深度优先遍历计算 子元素的相对单位的计算值都是基于父/祖先元素对应的属性值,auto是基于内容区域撑开计算所得。.../post/6960866014384881671 2.3.1 实例&解决方案 2.3.1.1 父子高度塌 父级margin,子级的margin-top无效 高度塌陷 代码&演示:https://codepen.io.../DYBOY/pen/poNxjOP 解决方案: 原因是父子组件的margin-top取最大值,上面例子中父子组件的包含块都是body,属于同一个BFC(html标签)内的子元素,因此需要将父/子元素变成...line-height高度,line-height规定的是行高最小的的高度 line-height是相对单位时,line-height具有继承性,其子元素如果没有设置line-height,那么子元素的行高为父元素计算所得的行高值

    1K20

    【面试题解】CSS布局,定位布局,浮动布局,BFC,IFC,FFC,GFC

    因为浮动元素脱离了普通流,会出现一种高度坍塌的现象:原来的父容器高度是当前盒子撑开的,但是当当前盒子浮动后,脱离文档流浮动起来,那父容器的高度就坍塌。...relative 相对定位,元素保留在标准流中所占用的位置,但实际是边框及以内的部分将显示在偏移之后的位置。在相对定位中,实际上元素并未脱离标准流,所以浏览器还是会区分它是否是块级或其他类型的元素。...如果定位元素的父元素也设置了 z-index 属性,那么子元素的 z-index 属性将失效,并且最终是根据父元素的 z-index 属性来判断覆盖关系。...属性垂直对齐,可能是底部对齐,顶部对齐,也可能是基线对齐(默认); 是当 IFC 中有块级元素插入时,会产生两个匿名块将父元素分割开来,产生两个IFC; 能把在一行上的框都完全包含进去的一个矩形区域,...如果子元素未设置强制换行的情况下,行框将不可被分割,将会溢出父元素。

    1.6K30
    领券