1

我正在构建一个 CSS 站点，但未能解决这个部分问题：

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

如果里面有更多内容，我希望左侧的框自动拉伸。这已经适用于我当前代码的右侧。（我将两列都放入容器 div 并将左框设置为 height: 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 */
}

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

替代文字

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

我怎样才能在左边的框中添加文本，这也会拉伸它？或者此时是否可以使用 TABLE 而不是 CSS？

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

替代文字 http://img502.imageshack.us/img502/1241/layoutsample2.png

4

2 回答 2

2

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

使用 CSS 的等高列是最好的 CSS 技术，其中需要将背景和底部弯曲边缘提供给 div#vertical 拉伸器。

我知道使两列高度相等的唯一另一种方法是使用 JavaScript。请参阅有关使用 jQuery 设置相等高度的灯丝组文章。

于 2009-11-05T10:36:47.953 回答
0

问题是绝对定位！如果您想自动调整左侧框的大小（垂直），只需将“float:left”应用于#bgtop！请注意，并非所有浏览器（例如 IE6）都支持属性“min-height”！下面的代码是一个例子：

<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>

你可以看到下面的结果：

替代文字

4 个 div(s) 根据其内容垂直调整大小！

于 2009-11-05T09:08:57.900 回答