jquery - 使此布局高度增长的最佳方法是什么

Question

请检查此网站布局图像:

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

Answer 1

不确定黑色“框”和蓝色丝带是什么，所以我认为它们是某种标题。但无论如何，我希望您能理解我的想法，并且能够根据您的需要修改我的代码。

<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-header div 是我认为的标题，它应该有黄色部分作为背景。

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