代码之家 › 专栏 › 技术社区 › Tarnschaf

按内容大小自动拉伸多部分CSS背景

background-image css html

Tarnschaf · 技术社区 · 16 年前

我正在构建一个CSS站点,但未能解决此部分问题:

在左侧有一个由三个图像组成的框。顶部图像、中间图像(可选和拉伸)和底部图像。

如果盒子里有更多的内容,我希望它在左边自动伸展。这已经适用于我当前代码的右侧。 (我将两列放入一个容器分区,并将左框设置为高度:100。)

但现在左框中也应该有内容。这个内容会溢出,因为我将左框设置为position:absolute。因此不会增加尺寸。

我没能在没有位置的情况下获得这种效果:当然是绝对的。我试过用浮筒等。

下面是示例代码:

    <body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop">            
                <div id="bgbottom">         
                    <div id="bgmiddle">
                    </div>
                </div>
            </div>
            <div id="content">
                Content here will auto-stretch the container vertically (and the box to the left!)
            </div>  
        </div>
        Footer etc<br/>
    </div>
</body>

使用此样式表:

#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    position: relative;
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;   
}
#bgtop {
    position: absolute;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;              
}
#bgmiddle {
    position: absolute;
    width: 100%;
    top: 250px; /* Don't cover top GIF */
    bottom: 15px; /* Don't cover bottom GIF */
    background-color: yellow; /* Repeated image here */             
}
#content {
    margin-left: 200px; /* Start the text right from the box */
}

它看起来是这样的(为了更好地理解,把它涂上颜色):

alt text http://img688.imageshack.us/img688/802/layoutsample.png

黄色部分实际上是一个拉伸的图像,例如,我省略了它,它按预期工作。

如何将文本添加到同时拉伸文本的左框中?或者在这一点上,是否可以用table而不是css?

编辑:Bitdrink的解决方案在我的浏览器(当前FF)中是这样看的。

alt text http://img502.imageshack.us/img502/1241/layoutsample2.png

2 回复 | 直到 10 年前

Matt Smith 16 年前

在这里我可能是错的,但是你想在这里实现的是两列相同的高度,不管左栏或右栏中有多少文本。

Equal Height Columns using CSS 这是最好的CSS技术,通过背景和底部曲线边缘需要给垂直拉伸器。

我知道的另一种使两列高度相等的方法是使用javascript。见 The Filament group article on setting equal heights with jQuery .

Spooky Muscothym 10 年前

问题是绝对定位!如果您想自动调整左框的大小(垂直),只需将“float:left”应用于bgtop! 请注意,并非所有浏览器(例如IE6)都支持属性“最小高度”!下面的代码是一个示例:

<style type="text/css" >
#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;       
}
#bgtop {
    float: left;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    width: 100%;
    height: 100%;
    background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;                              
}
#bgmiddle {
    width: 100%;
    background-color: yellow; /* Repeated image here */                             
}
#content {
    margin-left: 200px;     /* Start the text right from the box */
    background-color: #FFF;
    border: 1px dotted black;
}

</style>


<body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop"> 
                text top                                           
                    <div id="bgmiddle">
                        text middle
                            <div id="bgbottom">
                            text bottom
                            </div> 
                    </div>
            </div>
         <div id="content">
         Content here will auto-stretch the container vertically (and the box to the left!)
    </div>
</div>
Footer etc<br/>
</div>
</body>

您可以看到以下结果:

alt text

4个分区根据其内容垂直调整大小!