代码之家 › 专栏 › 技术社区 › Mosh Feu Alex Chen

两列和背景复杂性

css jquery

Mosh Feu Alex Chen · 技术社区 · 13 年前

我需要与侧栏(提醒等)和中心栏接口,其中每个页面的内容。

我有两个栏目将等于他们的水平,我可以做。问题右侧栏目由三个部分组成的壁纸。具有固定高度的顶部和底部。中间部分的高度根据内容的不同而不同。

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

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

谢谢

2 回复 | 直到 13 年前

MUY Belgium 13 年前

我建议您使用以下划分的其他层次体现,以使用 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粘性页脚”。

Pevara 13 年前

实际上有一个技巧可以在没有任何js的情况下实现这一点,在我看来,wich总是一个加分项。我试着解释一下:

将您提供的整个图像分成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
    
   
   
    这应该奏效。现在,无论哪一个最大,左边还是右边,整个内容都会延伸。通过将背景设置为包装器,最小的列看起来会一直延伸,尽管它只会占据所需的高度。
   
   
    我知道这有点难以理解,所以我举了一个小例子让你澄清:
    
     http://jsfiddle.net/jczXV/