Question

我已经完成了这个想法，所以寻找一些帮助来实现这个目标。或者可能确认它不可能，并建议我应该怎么做！

我正在重新设计一个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>

和CSS：

.content_botbg {
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 {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    float: left;
    width: 24px;
}

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

.content_bg_right {
    background: url("images/content-container-right.png") repeat-y scroll right center transparent;
    float: left;
    width: 23px;
}

希望有人能帮忙，因为我一直在撕扯我的头发。

谢谢，

赖安

Answer 1

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

然后您需要为孩子指定宽度和高度。

最后，添加一个特殊的案例div（class =“content_bg_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>

Answer 2

它应该通过移除浮动并使用一些绝对定位（see fiddle）来工作。看起来您的右侧也应该width: 24px基于您的整体width，但我将其保留在23px（根据您的代码），因此它有1px个缺口小提琴的例子，但如果关闭的话很容易纠正。

<强> HTML

<div class="content_botbg">
<div class="content_bg_left"></div>
<div class="content_res"></div>
<div class="content_bg_right"> </div>
</div>

<强> CSS

.content_botbg {
   border-bottom: 0 solid #EFEFEF;
   margin: 0 auto;
   padding: 0;
   text-align: left;
   width: 988px;
   position: relative; /* added */
}

.content_bg_left {
    background: url("images/content-container-left.png") repeat-y scroll 0 0 transparent;
    position: absolute; /* replaced float */
    top: 0; /* added */
    bottom: 0; /* added */
    left: 0; /* added */
    width: 24px;
    min-height: 600px; /* moved from content_botbg */
}

.content_res {
    background: url("images/transparent_background.png") repeat scroll 0 0 transparent;
    /* removed float */
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 940px;
}

.content_bg_right {
    background: url("images/content-container-right.png") repeat-y scroll right center transparent;
    position: absolute; /* replaced float */
    top: 0; /* added */
    bottom: 0; /* added */
    right: 0; /* added */
    width: 23px;
}

Answer 3

您必须将position:relative添加到父级，然后执行height: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%;
}

结果与此类似：http://jsbin.com/arere4

您可以在http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

找到有关身高相等的更多信息

此外，您可以使用jQuery实现相同的效果，类似于：http://jsfiddle.net/ULUJX/

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

3 个答案: