[英]Why is the absolutely positioned element extending the parent element's height
考慮這個代碼片段。 我已經將 .slideup div 相對於身體進行了絕對定位。
現在我知道絕對定位的元素是從正常的內容流中刪除的，並被視為它們不存在於父元素中。
但是這里 .slideup div 正在擴展父（主體）元素的高度，即使 max-height 設置為 100vh。
我基本上想要做的是讓消息從下方在屏幕上向上滑動，但是這段代碼在向下滾動時使其對用戶可見，我不希望發生這種情況。
為什么會發生這種情況，我該如何解決？
*, *::after, *::before { box-sizing: border-box; margin: 0px; padding: 0px; } body { position: relative; background-color: #34495e; color: #fff; font-family: Arial, Helvetica, sans-serif; /* display: flex; flex-direction: column; align-items: center; */ height: 100vh; max-height: 100vh; font-size: 110%; } /************************************/ /* SLIDER */ /************************************/.slideup { /* display: none; */ position: absolute; bottom: -4rem; font-size: 1rem; letter-spacing: 1.15px; background-color: rgba(0, 0, 0, 0.3); padding: .8rem.8rem 2rem; border-radius: 10px; transition: .5s bottom ease; }.slideup.show { bottom: -1rem; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Hangman</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- --> <div class="slideup show"> <div class="notification">You have already entered this letter!</div> </div> <script src="script.js"></script> </body> </html>
正如@TemaniAfif 所指出的，這個問題是通過向body 元素添加一個簡單的overflow: hidden屬性。
絕對定位的 div.slideup 不會擴展父級的高度，而是溢出它。 也可以通過向 body 添加邊框以及向 .slideup div 添加 right 或 bottom 屬性來驗證此行為。
父元素是否可以從絕對定位的子元素繼承高度？
[英]Is it possible for a parent element to Inherit height from an absolutely positioned child element?
絕對定位的元素的父元素必須適應孩子的身高
[英]Parent element of an element absolutely positioned absolute must accomodate the height of the child
當子元素的高度未知時，如何將絕對定位的元素置於其父元素中
[英]How to center an absolutely positioned element within its parent when the child element's height is unknown
如何設置絕對定位元素的父元素的高度以與子元素一起增長/縮小
[英]how to set height of parent of absolutely positioned element to grow/shrink with child
為什么絕對定位的元素會比以前的絕對定位的元素渲染？
[英]Why absolutely positioned elements render over previous absolutely positioned element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.