Html CSS是否将子div扩展为仅具有背景的父级？_Html_Css

Html CSS是否将子div扩展为仅具有背景的父级？

html css

Html CSS是否将子div扩展为仅具有背景的父级？,html,css,Html,Css,我已经用完了这一个的想法，所以寻找一些帮助，使这项工作。或者可能是确认这是不可能的，并建议我应该怎么做我正在重新设计wordpress网站的样式，并在主要内容的左侧和右侧添加了siv，以定位边框的外部图像我的问题是我不能让div的花费达到父母的高度布局如下： <div class="content_botbg"> <div class="content_bg_left"></div> <div class="content_res"><

我已经用完了这一个的想法，所以寻找一些帮助，使这项工作。或者可能是确认这是不可能的，并建议我应该怎么做

我正在重新设计wordpress网站的样式，并在主要内容的左侧和右侧添加了siv，以定位边框的外部图像

我的问题是我不能让div的花费达到父母的高度

布局如下：

<div class="content_botbg">
<div class="content_bg_left"></div>
<div class="content_res"></div>
<div class="content_bg_right"> </div>
<br style="clear:both">
</div>

希望有人能帮我，因为我一直在胡思乱想

谢谢

Ryan

尝试添加位置：相对于父div

然后需要为子对象指定宽度和高度

最后，添加一个特例div（class=“content\u bg\u IE”）以扩展其他div，以应对任何不符合IE的情况

例如：

<html>
<head>
<style>
.content_bg_IE   { height:600px; width:0px; }
.content_botbg {
  background: none repeat-x scroll center bottom transparent;
  position:relative;
  border-bottom: 0 solid #EFEFEF;
  margin: 0 auto;
  min-height: 600px;
  padding: 0;
  text-align: left;
  width: 988px;
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    min-height: 600px;
    float: left;
    width: 24px;
}

.content_res {
    background: url("transparent_background.png") repeat scroll 0 0 transparent;
    min-height: 600px;
    float: left;
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-left.png") repeat-y scroll right center transparent;
min-height: 600px;
    float: left;
    width: 23px;
}
</style>
</head>
<body>
hello world!
<div class="content_botbg">
<div class="content_bg_left"><div class="content_bg_IE"></div></div>
<div class="content_res"><div class="content_bg_IE"></div></div>
<div class="content_bg_right"><div class="content_bg_IE"></div></div>
<br style="clear:both">
</div>
</body>
</html>


.content_bg_IE{高度：600px；宽度：0px；}
.content\u botbg{
背景：无重复-x滚动中心底部透明；
位置：相对位置；
边框底部：0实心#EFEF；
保证金：0自动；
最小高度：600px；
填充：0；
文本对齐：左对齐；
宽度：988px；
}
.content\u bg\u左{
背景：url（“image/content container left.png”）重复y滚动0透明；
最小高度：600px；
浮动：左；
宽度：24px；
}
.content\u res{
背景：url（“transparent_background.png”）重复滚动0 0透明；
最小高度：600px；
浮动：左；
保证金：0自动；
填充：20px 0 30px；
宽度：940px；
}
.content\u bg\u右{
背景：url（“images/content container left.png”）重复y滚动右中透明；
最小高度：600px；
浮动：左；
宽度：23px；
}
你好，世界！

您必须将

位置：相对

添加到父级，然后执行

高度：100%

：

.content_botbg {
    position:relative;
    background: none repeat-x scroll center bottom transparent;
    border-bottom: 0 solid #EFEFEF;
    margin: 0 auto;
    min-height: 600px;
    padding: 0;
    text-align: left;
    width: 988px;
}

然后对孩子们说：

.content_bg_left, .content_bg_right, .content_res {
    height:100%;
}

结果与此类似：

有关等高柱的详细信息，请访问

此外，您还可以使用jQuery实现相同的效果，类似于此：

它应该通过移除浮动并使用一些绝对定位（）来工作。根据整体

宽度

，您的右侧似乎也应该是

宽度：24px

，但我将其保持在

23px

（根据您的代码），因此在小提琴示例中有

1px

间隙，但如果它关闭，则很容易纠正

HTML

CSS

.content\u botbg{
边框底部：0实心#EFEF；
保证金：0自动；
填充：0；
文本对齐：左对齐；
宽度：988px；
位置：相对；/*已添加*/
}
.content\u bg\u左{
背景：url（“image/content container left.png”）重复y滚动0透明；
位置：绝对；/*替换浮动*/
顶部：0；/*已添加*/
底部：0；/*已添加*/
左：0；/*已添加*/
宽度：24px；
最小高度：600px；/*从内容\u botbg移动*/
}
.content\u res{
背景：url（“images/transparent_background.png”）重复滚动0 0透明；
/*去除浮子*/
保证金：0自动；
填充：20px 0 30px；
宽度：940px；
}
.content\u bg\u右{
背景：url（“images/content container right.png”）重复y滚动右中透明；
位置：绝对；/*替换浮动*/
顶部：0；/*已添加*/
底部：0；/*已添加*/
右：0；/*已添加*/
宽度：23px；
}

Hi，content\u botbg是父容器。除非我疯了？让元素扩展到100%高度是有问题的，在很多情况下不值得这么麻烦。请尝试以下方法。将所有三幅图像合并为一幅，并将其作为内容背景。这可能是一种可能性。我已经分割了图像，以允许它扩展动态内容，但可能这是不可能的。恐怕这没有什么区别。代码已经更新，现在应该适合您的场景。如果高度太高，请将其设置为您想要的任何高度。对不起，这也不起作用。我相信这是因为我只使用了没有颜色属性的背景图像。我不能指定一种颜色，因为它会阻止我的图像不透明度正常工作。在测试中，添加颜色并不会产生任何影响。我已将您的代码直接复制到兼容的工作格式中。如果你在标签之间复制并通过一个空白文件，它应该是跨浏览器兼容的，按照你的预期进行操作。-我刚刚检查了IE——当然，它做了一些不同的事情！我会再做一点，我不能不同意你的推理，你的例子完美无瑕。但在这种情况下它就是不起作用。我之所以相信它，是因为我的div不包含任何内容……如果你的div不包含任何内容，它们可能无法缩放。您也可以手动设置高度：zz px如果div中没有任何内容。您是否有一个真实的示例来说明您正在做什么，或者您是否可以发布您的场景的一部分？这里可能还有其他令人困惑的变量。干得好，那个人！这不是完美的，但我认为我的一张背景图片有点不对劲，因此有1px的差异，但代码是正确的。显然，top:0和bottom:0可以在不需要内容的情况下拉伸div。好极了@user1413432——是的，中间div的内容驱动包装器div的高度，包装器div（具有

position:relative

set）成为两个

position:absolute

子元素的定位参考，允许

top

和

bottom

属性定义元素到包装器顶部和底部的高度。

.content_bg_left, .content_bg_right, .content_res {
    height:100%;
}