首页
学习
活动
专区
工具
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;

    89520

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

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

    1.2K20

    CSS | 视差滚动 | 笔记

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

    72821

    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

    建议收藏!总结了 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 属性,可以达到清除浮动目的。

    63210

    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
    领券