我有这个代码:
HTML:
<body>
<div id='main'>
<div id='mid'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque feugiat ante et purus ullamcorper dignissim. Aenean
aliquet leo eu risus fringilla gravida vel a elit. Etiam
congue lectus eu condimentum elementum. Cras sit amet ipsum
commodo, fermentum quam vitae, feugiat orci. Donec quis
venenatis quam, id consectetur eros. Cras rhoncus ut massa
et euismod. Nunc at felis arcu. Pellentesque consequat
augue ac nulla hendrerit egestas.
Donec auctor erat eu consectetur sodales. Sed sodales quam
eget lectus fringilla, et semper odio pretium. Sed tempus
suscipit tempus.
</p>
</div>
</div>
</body>
CSS:
<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”足够长，以表明它实际上超过了父元素“main”的底部。我似乎无法弄清楚如何使“主要”与“中间”一起扩展。 “mid”扩展以将整个段落放入其中，但我不知道为什么“main”与“mid”不一样。
最佳答案
如果你使用
#mid {
position:absolute;
}
#main 会丢失他的高度，因为你没有设置，width 是 100% 因为你设置了 显示: block 。因此，您只需从 #mid 元素中删除 position: absolute;。
这里是fiddle on this .
关于html - 如何使用CSS使子div的高度扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49847600/