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

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

html css

Html 按内容大小自动拉伸多部分CSS背景,html,css,background-image,Html,Css,Background Image,我正在构建一个CSS站点，但未能解决此部分问题：在左侧有一个由三个图像组成的框。顶部图像、中间图像（可选且拉伸）和底部图像如果里面有更多内容，我想让左边的框自动拉伸。这已经适用于我当前代码的右侧。（我将两列放入容器div中，并将左框设置为高度：100。）但现在左框中也应该有内容。此内容确实溢出，因为我将左框设置为位置：绝对。因此，它不会增加大小没有立场，我无法获得这种效果：尽管是绝对的。我试过使用float等下面是示例代码： <body> <div

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

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

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

但现在左框中也应该有内容。此内容确实溢出，因为我将左框设置为位置：绝对。因此，它不会增加大小

没有立场，我无法获得这种效果：尽管是绝对的。我试过使用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>

它看起来像这样（为了更好地理解，将其着色）：

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

如何将文本添加到左侧框中，同时也会拉伸它？或者在这一点上是否可以使用表而不是CSS

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

问题在于绝对定位！如果要自动调整左框的大小（垂直），只需在#bgtop上应用“float:left”！请注意，并非所有浏览器（例如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>


#中心包装{
宽度：500px；
保证金：0自动；
}
#垂直拉伸机{
最小高度：280px；/*顶部和底部图像高度之和*/
宽度：100%；
背景颜色：橙色；
}
#bgtop{
浮动：左；
宽度：185px；/*bg图像的宽度*/
身高：100%；
背景：#CCC url（css/img/bg_navi_left_top.gif）不重复；
}
#bgbottom{
宽度：100%；
身高：100%；
背景：#666URL（css/img/bg_navi_left_bottom.gif）底部无重复；
}
#bgmiddle{
宽度：100%；
背景色：黄色；/*此处重复图像*/
}
#内容{
左边距：200px；/*从框中右开始文本*/
背景色：#FFF；
边框：1px点黑色；
}
标题等

文本顶部
文本中间
文本底部
此处的内容将自动垂直拉伸容器（并将长方体向左！）
页脚等

您可以看到以下结果：

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

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

这是最好的CSS技术，背景和底部弯曲的边缘将需要提供给垂直拉伸

我知道的使两列高度相等的唯一其他方法是使用JavaScript。请参阅。

谢谢。正如我所说，我已经试过向左浮动，并且知道这是绝对定位。问题是我不能让它工作。当我尝试你的代码时，左框根本不会出现（因为它在我的firefox中被分配了一个0的高度），你正在运行哪个版本的FF？我已经在FF3.5.4、Safari和IE6中测试了代码，没有发现任何问题！如果删除左侧三个框的内容，通常不会显示为空，因为这三个div没有固定的高度！从您的问题中了解到的是：您正在尝试使用由4个div（s）组成的两列进行布局，左侧3个div，右侧1个div，根据内容自动调整其高度！这就是你想要实现的？是的。这就是目标。但重要的是，如果右侧内容较大，左侧div将自动调整大小（这已经起作用了，但仅适用于绝对位置。否则，我的身高：100%不起作用。此外，左侧的中间div只能填补两者之间的间隙。没有绝对位置，我不知道如何实现这一点。因此，您甚至希望左div自动水平调整大小？有一点不清楚…右边的内容应该比什么大？请看我的第一张图片：即使左右没有内容，包装也有一个最小高度。现在如果右边的内容超过这个高度，左边的div也会变大（这很有效！）。我的问题是，如果我将内容放在左侧的div中，它们不会因为绝对位置而变大。有趣的是，当我看到你的评论时，我已经在阅读等高文章了。它需要一些修改才能在我的特定情况下工作，但它解决了主要问题。

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