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

发布于 2024-08-09 13:21:42 字数 2270 浏览 4 评论 0原文

我正在构建一个 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

原文

I am building a CSS site and fail solving this partial problem:

On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.

I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)

But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.

I didn't manage to get this effect without position: absolute though. I tried using float etc.

Here is the example code:

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

With this stylesheet:

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

It looks like this (Colored it for better understanding):

The yellow part is actually a stretched image, I left it out for the example, it works as expected.

How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?

EDIT: BitDrink's solution looks this way at my browser (current FF)

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

战皆罪 2024-08-16 13:21:42

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

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

我所知道的使两列等高的唯一其他方法是使用 JavaScript。请参阅有关使用 jQuery 设置相等高度的 Filament 小组文章。

回复收藏 0 原文

可遇━不可求 2024-08-16 13:21:42

问题是绝对定位！如果您想要自动调整左框的大小（垂直），只需将“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>

您可以看到下面的结果：

alt text

4 个 div 根据垂直调整大小他们的内容！

the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:

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

You can see the result below:

alt text

The 4 div(s) resize vertically according to their content!

回复收藏 0 原文

~没有更多了~