絕對定位的子項應與其父項的大小相同，因為我在 320 像素和 767 像素屏幕寬度之間調整屏幕大小

Question

我有一個父 div header-mobile-banner和一個絕對定位的子 div header-mobile-graydiv 。 我希望兩個 div 的大小與我在 320px 和 767px 屏幕寬度（響應）之間調整屏幕大小的大小相同。 兩個 div 都應該是響應式的。 絕對的子 div 應遵循其父級的大小。

 @media screen and (min-width:320px) and (max-width:767px) { #myCarousel {display: none;} .carousel {display: none;} .header-mobile-banner {width: 100%; height: 663.31px; padding: 0; top: 0; background-image: url("../img/head_banner.jpg"); background-repeat: no-repeat;background-size: contain;} .header-mobile-graydiv {background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; right: 0; vertical-align: middle; text-align: center; horizontal-align: middle; bottom: 0;} .header-mobile-graydiv h3 {font-size: 50px;} .header-mobile-graydiv h1 {font-size: 92px;} .header-mobile-graydiv h4 {font-size: 39px;} .header-mobile-graydiv p {font-size: 20px;} }

 <div class="header-mobile-banner"> <div class="header-mobile-graydiv"> <h3 class="font-GaramondPremierePro white">WELCOME TO</h3> <h1 class="font-GreatVibes white">hello world</h1> <h4 class="font-GaramondPremierePro white">hello world</h4> <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim</p> </div> </div>

Answer 1

我認為這個問題隱含在標題中。 您的父 DIV 應該定位為子 DIV 絕對定位才能正常工作。 嘗試設置position: relative; 在父母身上。 子 DIV 應該設置overflow ，嘗試auto或scroll 。 另請注意，0 值不需要單位。 W3 的官方文檔值得一讀。

Answer 2

@benok 無論你現在在你的代碼庫中有什么，只需從你的 css 中刪除 bottom:0 ，你就會看到你想要的結果。 雖然這不是實現這一目標的正確方法。