如何根據具有絕對位置的子元素高度增加具有相對位置的父元素的高度。
在我下面的示例中.parent元素的高度顯示為0px
PS:我不想使用任何腳本
預期的:

我得到了什么:


.parent {
position: relative;
width: 250px;
}
.child,
.child::before,
.child::after {
box-sizing: border-box;
}
.child {
position: absolute;
}
.child:first-child::before {
content: '';
position: absolute;
bottom: 1em;
background-color: white;
width: 250px;
height: 100vh;
z-index: -1;
border-bottom: 1px solid #000000;
}
.child:last-child::before {
content: '';
position: absolute;
bottom: 0;
background-color: green;
width: 250px;
height: 100vh;
border: 1px solid #000000;
border-top-width: 0;
z-index: -2;
}
<div class="parent">
<div class="child" style="top:20px;">Hello</div>
<div class="child" style="top:40px;">Some content</div>
<div class="child" style="top:60px;">Some more content</div>
</div>
它不做和不能做的是設定父級的高度。并且假設父級上方的背景是白色的(當然它可以內置任何顏色,但它不是完全通用的 - 更像是一個練習)。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/360137.html
下一篇:樣式化行內元素的中斷
