Html 如何制作div'；s高度使用CSS子div展开

我有以下代码：

HTML:

Lorem ipsum dolor sit amet，是一位杰出的献身者。
权贵们的权利和义务。埃尼安
aliquet leo eu risus fringilla孕妇是精英。艾蒂安
欧盟调味品元素。同侧横位
康莫多，维塔发酵，封建奥奇。多尼克·奎斯
维尼那提斯广场，我是爱神。马萨罗库斯酒店
et euismod。在felis arcu的Nunc。佩伦茨克会议
奥古斯·阿努拉·亨德雷特·埃格斯塔斯。
Donec拍卖商erat eu CONCENTETUR sodales。塞德索达莱斯码头酒店
这是我的荣幸。塞德坦普斯
苏西皮特坦普斯。

CSS:

身体{
保证金：0；
填充：0；
}
#主要{
显示：块；
宽度：100%；
最小高度：100%；
背景色：黑色；
不透明度：0.85；
}
#中段{
位置：绝对位置；
左：0；
右：0；
保证金：0自动；
宽度：88%；
背景色：#558000；
不透明度：1；
}
p{
利润率：4vw 8vw 4vw 8vw；
字体大小：30px；
字体系列：投石机ms；
颜色：白色；
}

该段落只是为了使“mid”足够长，以表明它实际上超过了父元素“main”的底部。我似乎不知道如何使“main”和“mid”一起扩展。“mid”扩展以适应整个段落，尽管我不知道为什么“main”与“mid”不一样

#mid {
  position:absolute;
}

#main

将失去高度，因为您没有设置高度；

宽度

为

100%

，因为您设置了

显示：块

。因此，您只需删除

位置：绝对来自
#mid
元素

此处a.
您已将
#mid
定位为“绝对”，这意味着它已脱离页面的正常“流程”，因此，
#main
实际上无法识别其中有div，这就是为什么
#main
没有扩展到与
#mid
相同的高度的原因，您定位
#mid
绝对是有原因的吗？如果您删除它，它将修复您的问题
<style>
        body {
            margin:0;
            padding:0;
        }
        #main {
            display:block;
            width:100%;
            min-height:100%;
            background-color:black;
            opacity:0.85;
        }
        #mid {
            position:absolute;
            left:0;
            right:0;
            margin:0 auto;
            width:88%;
            background-color:#558000;
            opacity:1;
        }
        p {
            margin:4vw 8vw 4vw 8vw;
            font-size:30px;
            font-family:trebuchet ms;
            color:white;
        }
    </style>

#mid {
  position:absolute;
}