Jquery 两栏和背景

我需要与侧栏（提醒等）和中心栏进行交互，其中包含每个页面的内容

我有两列将等于他们的水平，我可以这样做。“问题右侧”列包含墙纸的三个部分。具有具有固定高度的顶部和底部。中间部分的高度因其内容而异

我的问题是，我需要中间部分将匹配的高度，最终所有将是相等的高度列第二列

我试着用剧本来做。问题是，当我使用jqueryanimate函数列时，没有添加高度Banmtzih，然后创建了一个小跳跃

有办法做到这一点吗

我的代码：

<div class="main_content">
    <div id="area_right">
        <div id="area_right_top">
            <div id="area_right_bottom">
                <div id="area_right_content">
                    My content..
                </div>
            </div>
        </div>
    <div>

    <div id="area_left">
        <div id="area_left_top">
            <div id="area_left_bottom">
                 <div id="area_left_content">
                    My left content
                 </div>
            </div>
        </div>
    </div>
</div>

我的内容。。
我左边的内容

预览：

---

谢谢

我建议您使用您的部门的另一个分层体现，如下所示，使用css样式表并使用

我的内容。。
ect

---

您可能想在搜索引擎中搜索“CSS sticky footer”。

在没有任何js的情况下，实际上有一个技巧可以实现这一点，在我看来，这总是一个加号。我会尽力解释：

• 将您提供的整个图像分为3部分，固定的顶部和底部，以及可以重复的1像素高的中间部分
• 按如下方式构造html：

​<div id="page-wrap"/>
    <div id="top-bg"></div>
    <div id="content">
        <div id="left">
            ...
        </div>
        <div id="right">
            ...
        </div>
        <div style="clear: both;"><!-- clearfix --></div>
    </div>
    <div id="bottom-bg"></div>     
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​
...
...
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

• 接下来，将背景图像应用于顶部bg和底部bg，作为无重复图像，并将其设置为固定尺寸
• 将中心图像应用于内容div，并将其设置为沿y轴重复
• 浮动您的右列和左列，并在顶部和底部给它们一个负边距，使它们在顶部和底部div上流动

这应该能奏效。现在，无论哪一个最大，左边还是右边，整个内容都会扩展。通过将背景设置为包装器，最小的列将显示为延伸，尽管它只占据所需的高度

---

从我的lowsy解释中，我知道这有点难以理解，所以我给您举了一个小例子来澄清：

请也发布您的jquery代码

​<div id="page-wrap"/>
    <div id="top-bg"></div>
    <div id="content">
        <div id="left">
            ...
        </div>
        <div id="right">
            ...
        </div>
        <div style="clear: both;"><!-- clearfix --></div>
    </div>
    <div id="bottom-bg"></div>     
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​