Question

我有这段代码：

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>

该段只是为了让＃34; mid＆＃34;足够长，以表明它实际上超过了父元素＆＃34; main＆＃34;的底部。我似乎无法弄清楚如何制作＆＃34; main＆＃34;随着＆＃34; mid＆＃34;一起扩展。＆＃34;中间＆＃34;扩展到适合整个段落，虽然我不知道为什么＆＃34;主要＆＃34;不会对＆＃34; mid＆＃34;

做同样的事情

Answer 1

如果您使用

#mid {
  position:absolute;
}

#main会失去他的身高，因为你没有设置，width是100%，因为你设置了display: block。因此，您只需从position: absolute;元素中删除#mid。

这是fiddle on this。

如何使用CSS

1 个答案: