Question

我在这上面已经想不通了,所以想寻求一些帮助使这个工作。或者确认它是不可能的, 并且建议我该如何做!

我重塑一个文字打印站点, 并增加了左侧和主内容右侧的 sivs, 以定位边界的外部图像。

我的问题是,我不能让迪夫花费到父母的高度!

以下是布局 :

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

中央安全委员会和中央安全委员会:

.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

它应该通过去除浮标并使用某种绝对定位( 见小提琴 )来发挥作用。你的右侧似乎也应该是 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 2

尝试添加位置: 与父 div 相对

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

最后,增加一个特殊案例div(类=“content_bg_IE”),以扩大其他的divs, 用于永远不遵守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 3

您必须添加 < code> position: relative 到父母, 然后做 < code> hileight: 100 {/ code> :

.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%;
}

结果将与此类似 : < a href="http://jsbin.com/arre4" rel="nofollow" >http://jsbin.com/arre4

您可以在 rel=“nofollow”查询关于等高高高丘的更多信息。

此外,您还可以使用jQuery来达到同样的效果,类似于这个效果:http://jsfidd.net/ULUJX/

友情链接