2

我已经没有这个想法了，所以寻找一些帮助来让它工作。或者也许确认它是不可能的，并建议我应该怎么做！

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

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

谢谢，

瑞安

4

3 回答 3

1

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

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

最后，添加一个特殊情况的 div (class="content_bg_IE") 以扩展其他 div 以应对 ever-non-compliant-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>
于 2012-05-23T19:31:40.500 回答
1

它应该通过移除浮动并使用一些绝对定位来工作（参见小提琴）。似乎您的右侧也应该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;
}
于 2012-05-24T01:47:22.207 回答
0

您必须添加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/

于 2012-05-23T20:17:23.857 回答