0

我需要与侧栏（提醒等）和每个页面内容的中心栏交互。

我有两列将等于他们的水平，我可以做到。问题右栏由壁纸的三个部分组成。具有固定高度的顶部和底部。中间部分的高度根据其中的内容而变化。

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

我试着用一个脚本来做。问题是，当我使用 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>

预览：预览

谢谢！

4

2 回答 2

1

我建议您使用如下所示的分区的其他分层实施例，使用css样式表并使用此技巧。

<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 粘性页脚”。

于 2012-08-22T07:36:07.033 回答
0

实际上有一个技巧可以在没有任何 js 的情况下实现这一点，我认为这总是一个加分项。我将尝试解释：

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

​&lt;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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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

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

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

于 2012-08-22T09:46:08.417 回答