Jquery 使布局高度增加的最佳方法是什么

请检查此网站布局图像：

我想使高度随着内容高度的增加而增加。我想到的唯一方法是通过jquery更改div的高度来完成设计。我正在寻找这种布局的最佳解决方案

我不确定黑色的“盒子”和蓝色的丝带是什么，所以我把它们看作是某种标题。但不管怎样，我希望你能明白我的想法，你能根据自己的需要修改我的代码

<div id="header" class="green">
    <!-- Green section, header of the page -->
</div>
<div id="content" class="red">
    <!-- This #content div should have the red zone as a background -->
    <div class="content-header yellow">
        <!-- Yellow section, header of the content -->
    </div>
    <div class="content-body">
        <p>Your content</p>
    </div>
</div>
<div id="footer" class="purple">

</div>

你的内容

#content

div应该以红色部分为背景，这是一种可以垂直重复的薄型图案

.content标题

div是我认为的标题，它应该有黄色部分作为背景

---

但基本上，我们的想法是有一个页眉（绿色）、一个背景可以垂直重复的内容区域（红色）和一个页脚（紫色）。

内容的确切位置在哪里？@Robin它将位于花边的内部background@aug仍在建设中，只是想知道什么是最好的编码方式的其他意见