position:absolute 父元素高度塌陷

最新推荐文章于 2024-04-18 20:33:02 发布

原创最新推荐文章于 2024-04-18 20:33:02 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html #css

css 专栏收录该内容

1 篇文章

订阅专栏

当子元素使用`position: absolute`时，会导致父元素高度塌陷。解决这个问题的方法包括：将子元素的定位改为`relative`，通过JavaScript动态设置父元素高度，或者利用浮动和`overflow:hidden`。本文深入探讨了这些解决方案。

问题描述：

父元素position：relative ；子元素是position：absolute；父元素高度塌陷

产生原因：

position：absolute会脱离标准流，所以父元素无法自适应子元素高度，

解决办法：

1.将子元素的position：absolute，换成relative，因为position：relative不会造成元素脱离标准流。此时父元素就可以随着子元素自适应高度了。

2.如要绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
3.用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。

CSS 相对|绝对(relative/absolute)定位系列（一） « 张鑫旭-鑫空间-鑫生活https://www.zhangxinxu.com/wordpress/?p=1287

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chen 留

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 父级元素高度为0(父元素坍塌) 解决方案

子燕若水的博客

09-04

6273

CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。主要有两个原因：）子元素使用绝对定位）子元素浮动 1）子元素使用绝对定位，父元素没设置宽高此时子元素已从正常文档流中移除，并且不会在页面布局中为该元素创建空间。所以父元素依靠子元素撑起其宽高时会为0；解决方案：子元素的绝对定位改为相对定位改为相对之后页面布局时会为子元素创建相应的空间，此时没设置宽高的父元素也会被子元素撑起来了。 ...

CSS position:absolute全面了解

09-24

3. **对父元素的影响**：如果父元素没有设定高度，且包含绝对定位的子元素，可能会导致父元素高度塌陷，需要通过设置`height`或`min-height`来避免。总结来说，`position:absolute`是CSS布局中一个强大且灵活的...

参与评论您还未登录，请先登录后发表或查看评论

css解决浮动导致父元素高度坍塌的几种方法

11-21

以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧一.定位的分类普通流定位浮动定位相对定位绝对定位 ①普通流定位又称为默认文档流定位 1.每个元素在页面上都有自己的空间 2.每个元素都是从父元素的左上角开始渲染（显示） 3.块级元素按照从上到下逐个排列，每个元素单独成行 4.行内元素是多个元素在一行中显示，从左往右顺序排列，显示不下换行 ②浮动定位让块级元素横向显示 float：取值：left 让元素浮动后，在当前行停靠在父元素的左侧，

高度塌陷的问题

weixin_41664064的博客

08-21

636

一、JDBC JDBC，即Java Datebase Connection。顾名思义，JDBC用于通过Java连接数据库。二、JDBC与数据库的连接三、插入、删除、更新四、查询

absolute导致高度塌陷

weixin_56006480的博客

05-23

2410

首先，通过querySelector方法获取到父元素和子元素的DOM节点，然后使用offsetHeight属性获取子元素的高度，将其赋值给父元素的高度。需要注意的是，使用相对定位和绝对定位时，子元素的定位是相对于最近的已定位祖先元素，如果没有已定位祖先元素，则相对于文档根元素。4.可以通过JS来获取子元素的高度，并将其赋值给父元素的高度，从而避免绝对定位元素导致的高度塌陷问题。属性会使元素脱离文档流，并不再占据原来的空间，从而导致父元素高度塌陷的问题。属性，可以让子元素相对于父元素的顶部对齐。

Web前端之绝对定位父元素高度塌陷问题、接近完美的跑马灯、巧妙的计算速度、走马灯动画、文本滚动、清除浮动、相对定位、四舍五入、流水灯、坍塌、absolute

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

04-18

2719

绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案

最新发布

11-25

我们讨论的是在绝对定位(position: absolute)导致父元素高度塌陷的问题。根据引用内容，我们可以总结如下： 1. 原因：position: absolute会使元素脱离文档流，因此父元素无法计算其高度，导致高度塌陷。 2. 常规...

position:absolute;高度塌陷

12-26

更灵活的做法是利用自动计算属性来动态调整父元素高度： ```css .parent { height: fit-content; /* 或者 min-height */ } ``` 这种方式允许浏览器根据内容自适应调整父元素尺寸[^4]。 #### 方法三：引入额外...

为什么父元素设置了，position:relative; 子元素设置position：absolute；后父元素的高不能被子元素内容自动撑开，如果要自动撑开，应该要怎么做

10-17

3. **给父元素设置min-height**：虽然不是“自动”，但可以通过设置最小高度值让父元素有最低限制，避免塌陷。 ```css .parent { position: relative; min-height: 100px; /* 根据需要调整数值 */ } ``` 请注意...

css实现，一个父元素有两个竖着排列的子元素，第一个position:relative,第二个position:absolute ，第二个高度超过一屏高度，会撑开父元素滚动，但也会导致第二个元素紧贴着底部，怎么给第二个元素底部和父元素底部之间设置边距

10-29

我们面对的问题：父元素有两个竖向排列的子元素，第一个子元素position:relative，第二个子元素position:absolute且高度超过一屏，导致父元素出现滚动条。我们需要在第二个子元素的底部与父元素的底部之间设置边距。...

JS解决子元素浮动或绝对定位造成的父元素高度塌陷问题

Arvin的博客

11-21

2126

当我们在代码中给子元素添加浮动或者绝对定位时，父元素会存在高度塌陷问题，可以使用JS来解决。首先通过获取子元素的高度，将子元素的高度传给父元素，同时在页面窗口或框架被调整大小时获取子元素高度并传给父元素。代码如下： 子元素.onload = function () { height = this.height; 父元素.style.height = height + "px"; } window.onresize

高度塌陷解决方法

qq_52813099的博客

07-20

1278

摘要：好好学好好看加油！！！！！！！！

CSS中的定位和解决父元素高度塌陷

QyangR1123的博客

02-27

5648

在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。 1、相对定位( position: relative;) 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。 2、绝对定位（position: absolute;）绝对定位使元素的位置与文档流无关，因此不占..

absolute导致的高度塌陷问题——解决方法

weixin_44066534的博客

07-03

2万+

前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题，以前代码写的少所以遇到问题就是查查查，问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查，所以这次索性总结一下。什么是高度塌陷？在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。 PS：因为pos

css position:absolute 父元素高度塌陷

wangjun5159的专栏

10-12

1万+

问题在使用iSroll v4插件时，无法滚动到底部，从源码得知最大滚动位置由maxScrollY决定。从源码摘录出计算maxScrollY的部分 that.wrapperH = that.wrapper.clientHeight || 1; that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that...

absolute和float脱离文档流，导致父元素塌陷的解决方式：

Handsome2013的博客

05-06

1836

浮动元素容器的clearing问题 1. 问题的由来有这样一种情形：在一个容器（container）中，有两个浮动的子元素。 <div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </d...

关于css中父元素塌陷问题以及解决办法

军火库

02-03

964

主要记录下经典的父元素塌陷问题，在开发过程中如果碰到相关问题，可以联想到这几种解决办法，更好的去优化代码。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

CSS之高度塌陷

hamov的专栏

06-14

605

1、在文档流中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，子元素脱离文档流，此时将导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 2、由于父元素塌陷，则父元素下的所有元素向上移动，导致页面布局混乱。 3、根据w3c的标准，页面中元素都有一个隐含的属性叫Block Formatting Context简称BFC（IE6及以下版本不支持），该属性可以设置打开或关闭，默认为关闭，当