Question

我正在构建一个CSS站点并且无法解决这个部分问题：

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

如果内部有更多内容，我希望左侧的框自动拉伸。这已经适用于我当前代码的右侧。（我将两列放入容器div中，并将左侧框设置为高度：100。）

但是现在左边的框中也会有内容。这个内容确实溢出，因为我将左框设置为position：absolute。因此它不会增加尺寸。

没有位置我没有设法得到这个效果：绝对。我尝试使用float等。

以下是示例代码：

    <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 */
}

它看起来像这样（为了更好的理解而着色）：

黄色部分实际上是一个拉伸的图像，我将其留作示例，它按预期工作。

如何在左侧框中添加文本以扩展它？或者此时可以使用TABLE而不是CSS吗？

编辑：BitDrink的解决方案在我的浏览器中看起来是这样（当前的FF）

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

Answer 1

我可能在这里错了，但无论左侧或右侧列中有多少文本，您在此处尝试实现的是两列相同高度的列。

Equal Height Columns using CSS是最好的CSS技术，需要将背景和底部弯曲边缘赋予div＃vertical stretcher。

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

Answer 2

问题是绝对定位！如果你想要左框的自动调整大小（垂直），只需将“float：left”应用到#bgtop！请注意，并非所有浏览器都支持属性“min-height”（例如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个div根据其内容垂直调整大小！

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

2 个答案: