HTML – 如何在CSS中创建动态背景div？

2023年2月3日 260次阅读

我在下面创建了下面的图片,只是为了帮助你们了解我在这里要做的事情.

我需要在我的网页中进行这些划分,但我不知道如何以动态的方式做到这一点.
我的内容将是动态的,例如,有时我有一个小文本,但有时我有一个更大的文本,并且页面不遵循与在小文本内容中相同的结构.

> Here is a page with a small text.
> Here is a page with a big text.

我希望背景符合内容的大小,并保持与我在上图中显示的相同的结构.

更新：
可可方法：

最佳答案 试试这个布局.我认为这将有助于您纠正此问题

Fiddle link

HTML：

<div class="outer-div">
         <div class="top-bg">
             <div class="container">
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
             </div>
         </div>
        <div class="middle-bg">
            <div class="bg-bottom-div"></div>
        </div>
        <div class="footer"></div>
</div>

CSS：

.outer-div {
    background:#000;
}
.top-bg {
    padding-bottom:40px;
}
.container {
    background:#fff;
    width:400px;
    margin:0 auto;
}
.middle-bg {
    background:#880015;
}
.bg-bottom-div {
    background:#fff;
    width:400px;
    margin:0 auto;
    height:60px;
    position:relative;
    top:-20px;
}
.footer {
    background:#00a2e8;
    height:40px;
}
点赞