Question

我需要与侧栏（提醒等）以及每个页面内容的中心列进行交互。

我有两列将等于他们的等级，我可以做到。问题右栏包含壁纸的三个部分。顶部和底部的高度是否固定。中间部分根据其中的内容而变化。

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

我尝试用脚本来做。问题是，当我使用jquery animate函数列时，不添加高度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>

预览：Preview

谢谢！

Answer 1

我建议您使用如下所示的部门的其他分层实施例，以使用 css 样式表并使用this trick。

<div class="main_content">
    <div id="area_right">
        <div class="wrarper">
            <!-- 100% height and margin-bottom -XXXpx throught CSS-->
            <div id="area_right_top"><!-- determined height throught CSS-->
            </div>
                    My content..
            <div class="push"></div><!-- height:XXXpx throught CSS-->
        </div>
        <div id="area_right_bottom"><!-- height:XXXpx throught CSS-->
        </div>
    <div>
    ect ect     
</div>

您可能希望在搜索引擎中搜索“CSS粘性页脚”。

Answer 2

实际上有一个诀窍就是没有任何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>

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

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

这应该可以解决问题。现在无论哪个最大，左或右，整个内容都会延伸。通过将背景设置为包装器，最小的列将显示为拉伸，尽管它只占用所需的高度。

我知道从我的低调解释中有点难以理解，所以我设置了一个小例子让你澄清：http://jsfiddle.net/jczXV/

两列和背景并发症

2 个答案: