自动拉伸的内容大小多CSS背景

StackOverflow https://stackoverflow.com/questions/1677845

  •  16-09-2019
  •  | 
  •  

题

我建立一个CSS网站和故障解决这个问题的部分：

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

我想的方框，左自动伸展如果存在内部更多的内容。这已经适用于右侧与我当前的代码。 （我把两列到容器DIV并设置左框高度：100）

不过现在也存在应在左框的内容。此内容不溢出，因为我设置左框的位置是：绝对的。因此，它不会增加尺寸。

我没得到没有位置这样的效果：绝对虽然。我尝试使用浮法等

下面是示例代码：

    <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

有帮助吗？

解决方案

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

使用CSS 是最好的CSS技术为这个在由所述背景相同的高度列和底部弯曲边缘将需要被提供给div的＃垂直担架。

这我知道，使两列等高是使用JavaScript的唯一的其他方式。请参阅上与jQuery 设置相等的高度的长丝组文章。

其他提示

问题是绝对定位！如果您想进行自动调整大小左框（垂直），只应用一个“浮动：左”到#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>

可以看到下面的结果：

“替代文字”

在4格（S）根据其内容垂直调整！

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top