为什么绝对定位的元素要扩展父元素的高度
绝对定位的元素要扩展父元素的高度是因为绝对定位的元素脱离了文档流，不会对其他元素产生影响，也不会占据空间。当一个元素被设置为绝对定位时，它会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。
由于绝对定位的元素不会占据空间，如果父元素没有设置高度或者高度为auto，父元素的高度将会塌陷，导致绝对定位的元素超出父元素的范围。为了解决这个问题，可以通过扩展父元素的高度来包含绝对定位的元素。
扩展父元素的高度可以通过以下几种方式实现：
- 设置父元素的高度为固定值：可以通过设置父元素的高度为一个固定的像素值或百分比值来确保父元素能够容纳绝对定位的元素。例如，设置父元素的高度为200px或者50%。
- 设置父元素的高度为最小高度：可以通过设置父元素的最小高度（min-height）为一个固定值或百分比值来确保父元素能够容纳绝对定位的元素。例如，设置父元素的最小高度为200px或者50%。
- 使用padding或margin撑开父元素：可以通过给父元素添加上下padding或margin来撑开父元素的高度，使其能够容纳绝对定位的元素。例如，给父元素添加padding-bottom或margin-bottom。
需要注意的是，以上方法都需要根据实际情况进行调整，具体的实现方式取决于页面布局和设计需求。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr
相关·内容
1回答
我绝对定位了.slideup div相对于body的位置。
现在我知道，绝对定位的元素被从正常的内容流中剪切出来，并被视为父元素中不存在的元素。但是在这里，.slideup div扩展了父元素(Body)的高度，即使max-height被设置为100vh。我基本上想做的是让消
浏览 10提问于2020-05-06得票数 0
假设您有一个父div，它包含几个普通子级和一个绝对子级。(我试着读，但我真的迷路了。)outsider { left: 0; backg
浏览 2提问于2014-05-08得票数 6
回答已采纳
我的目的是定位子div相对于父固定模态窗口，这样子div的左偏移量约为父模式宽度的8.33%。因此，最初我认为我应该绝对定位子div，但是一旦我这样做了，父模式窗口的背景不会扩展到子div：
下面是上面的html/css : html：
我没有
浏览 3提问于2016-02-10得票数 0
回答已采纳
2回答
我正在尝试设计一个相对定位的div，它将由两个div组成。子div没有一个固定的高度，但它们随着内容的不同而不同，因此父div随子div的高度而扩展。现在设计工作正常了，但是当我用Firebug分析代码时，我看到在Firebug的body标签上悬停时，整个屏幕最上面只有一小部分显示为body。侧面板确认了，车身的宽度是可以的，但高度是0。这意味着父</em
浏览 0提问于2012-08-03得票数 3
回答已采纳
1回答
试图将两个元素放置在同一个位置，以便在状态之间切换。
父元素是相对定位的，子元素是绝对的。问题是我失去了父母的高度。我知道我可以将这些子元素设置为浮动元素，但我需要它们处于相同的位置，以便在显示一个元素和在显示一个元素时隐藏一个元素之间进行转换。是否有办法将这两个元素放在同一个位置，而
浏览 0提问于2017-06-02得票数 0
回答已采纳
1回答
定位绝对和停留文档流
、、、、
在css中，有没有办法定位一个类似于绝对元素(相对于父元素)的元素，比如放在它的父元素的底部，但是让它仍然留在文档流中？例如，一个相对位于元素上方的元素，通过获得更高的高度，将“绝对”元素向下推，同时容器元素的高度也在增加
浏览 0提问于2012-10-26得票数 1
如何在相对定位的div中包含绝对定位的div？例如，像这样的结构：.wrapper {}
position: absolute; </div>
将导致contentWrapper的高度为0(当元素被检查时)，并且包含内容类<
浏览 1提问于2013-09-12得票数 4
1回答
我在一个非常基本的网站模板上工作，左上角有固定的标题，左下角和右下角有固定的底线。问题1。)如果移除height: 100% css属性，为什么垂直居中不起作用？问题3。)为什么bottom-left显示正确，但bottom-right显示不正确
问题4。)如果with设置为100%
浏览 0提问于2012-05-16得票数 0
2回答
我使用elementFromPoint来查找在鼠标事件被ui掩码捕获后要传递给哪个元素。我捕获掩码处的事件，隐藏掩码，然后使用elementFromPoint(event.pageX，event.pageY)获取底层元素。问题是，对于绝对定位的元素，elementFromPoint似乎根本不起作用。它只是给出了第一个非绝对定位的父级。有没有办法同时获得绝对和非<e
浏览 1提问于2013-07-18得票数 1
回答已采纳
我有一个带有子元素的可滚动元素。在这个子元素中(没有预设的宽度或高度)是一组绝对定位的元素，它们可以具有任意的宽度、高度、左和顶值。父元素能够滚动，以适应查看这些绝对定位的元素，无论它们在哪里，但是我在检索这个父元素中有多少可滚动空间时遇到
浏览 2提问于2010-12-12得票数 0
回答已采纳
3回答
基本上，我有一个父div元素，只包含一个子div元素。现在，我想将子div的位置设置为绝对值(对于动画/页面转换效果)。但是在这样做时，父div元素的高度被设置为0，这将改变不需要的整个布局。如何将此设置为将父div元素的高度设置为绝对定位的子div元素的<
浏览 1提问于2022-02-18得票数 0
1回答
我正在开发一个集成了水平滑动功能的移动网站。不幸的是，当我试图让我的网站布局的其余部分正常工作时，这造成了一个令人头疼的问题。-尝试将浏览器窗口调整得相当小，您将看到#wrapper (绿色)中的#footer (红色)内容。这似乎与设置高度有关:在大多数元素上设置100%，然后将绝对定位应用于水平滑动div (swipeview-masterpage-1)。我想让#wrapper扩展到内容
浏览 0提问于2012-09-18得票数 2
1回答
在iPad的HTML5应用程序上工作，我想改变一个元素硬件加速的高度。
我已经在一个子元素(绝对定位，大于父元素)上创建了一个视区(父元素，溢出:隐藏)，扩展视区的高度应该会显示子元素的更大部分。这个动画在我的桌面浏览器(Chrome)上看起来真的很不错，但在我的iPad (
浏览 0提问于2012-10-15得票数 2
我想在右边浮动的a div中应用绝对位置。这是我的HTML <div id="membership"> <span><a href="#">Join Us</a></span>
</div
浏览 4提问于2012-01-14得票数 0
回答已采纳
2回答
我尝试将inline元素定位为父inline元素的绝对位置。但是由于某些未知的原因，父元素比它看起来要大。如果您尝试以下操作，您将看到绝对右侧定位的元素将位于父元素的外部。如果你使用width: 100%，这也会是一个问题，这会使子元素比父元素</e
浏览 0提问于2017-06-20得票数 1
我尝试在下拉菜单中使用jquery幻灯片效果(正如本教程所示： --这似乎是制作jquery下拉菜单的一种非常常见的方法)，但是每当我将鼠标悬停在列表项上时，子菜单就会向下推入它下面的div (我的主要内容我想避免绝对地定位content div。谢谢!
浏览 0提问于2011-01-24得票数 2
回答已采纳
3回答
元素是绝对定位的，可以通过鼠标移动/调整大小，并且/或包含可编辑的文本，其高度可以由行数决定。但是，我遇到的问题是父元素的高度没有扩展到包含其绝对定位的子元素。</div>只有CSS的解决方案是理想的</e
浏览 1提问于2013-09-22得票数 10
回答已采纳
当我们给一个元素一个具有垂直和水平偏移(例如底部和左侧)的位置属性绝对时，它是相对于位置属性为相对的最近父元素定位的。
如果没有父元素具有相对属性，则相对于浏览器窗口定位绝对定位的元素。固定定位的定义与它所说的完全相同，“固定定位是一种绝对
浏览 2提问于2018-06-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
