html - Div 拉伸(stretch)以适应内容。溢出 : auto; does not work

Question

我创建了一个长长的滚动网站，该网站由填满整个屏幕的不同部分组成。 One Section 包含一些相当长的文本，但文本的顶部和底部部分被截断了。基本上我的 div 不会一直拉伸(stretch)以容纳文本。我希望我的 div 能够至少收缩 200%。

fiddle

我试过了

overflow:auto;
min-height:100%;

这就是它的样子，正如您在底部看到的那样...文本被截断了。

如果我删除 Position: absolute;整个文本向左移动，底部文本仍然被截断。

这是我的 html 的一部分:

<section id="slide-15" class="homeSlide">


 <div class="bcg">
       <div class="hsContainer">


       <h1>CV GUIDE</h1>
       <br>

         <h2>
           //lengthy text goes here
           //lengthy text goes here
           //lengthy text goes here
         </h2>

      </div>
</div>

</section>

和style.css的一部分

#slide-15 .bcg {
/*position: relative;*/
background-color: #1C1C1C;
min-height: 100%;
overflow: auto;
/*padding:150px;*/
}

slide-15 .hsContent {
        position: relative;
}

slide-15 .hscontainer {

       width-100%
       min-height: 100%;
        overflow: auto;
       /* position:relative;*/
}


#slide-15 h1 {
                margin: 70px;
                color: #ffffff;
                font-size: 30px;
                line-height: 20px;
                 position: relative;
                 text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}


#slide-15 h2 {
                 color: #ffffff;
                 font-size: 14px;
                 line-height: 150%;
                 position: absolute;
                 line-spacing: 1px;
                 text-align: justify;
                 width: 700px;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
           }

Answer 1

使用 position:absolute 时，它会从工作流程中删除，因此您需要将其删除并希望父 div 调整到高度；

同时将其设置为 display:inline-block ,

检查 fiddle

---

你在 CSS 中有很多语法错误，

我稍微清理了一下这里的 updated fiddle