Question

我有以下代码：

#left {
width:383px;
margin:0px;
float: left;
position:relative;
}
.bg_top{
background: transparent url(../bg_top.png) no-repeat;
width: 383px;
height: 140px;
}
.bg_middle{
background: transparent url(../bg_middle.png) no-repeat;
width: 383px;
height: 100%;
}
.bg_bottom{
background: transparent url(../bg_bottom.png) no-repeat;
width: 383px;
height: 131px;
}
#left_inner{
width:375px;
border:2px solid #98b73f;
position: absolute;
top: 5px;
}

<div id='wrap'>
    <div id='left'>
        <div class='bg_top'>
            bg_top
        </div>
        <div class='bg_middle'>
            bg_middle
        </div>
        <div class='bg_bottom'>
            bg_bottom
        </div>
        <div id='left_inner'>
<p>long text</p></div</div</div>

我希望bg_middle类延伸到left_inner div的高度。我已经尝试了高度100％并在网上搜索答案。我是css世界的新人。我想我必须以某种方式将作为背景的3 div连接到内部div ......

Answer 1

使用HTML就可以了，如果没有Javascript，你就无法做到。块元素调整到容器的高度。如果目标是使用background-image，则只需将其应用于left-inner。不要使用绝对位置，因为该块会独立于内容流。鉴于您有固定的高度，您可以使用min-height以防内容不足。我不确定这是你在找什么。

Answer 2

我强烈建议在这里做些不同的事情.. 然而，这是我建议采用原始方法的解决方案：

#left {
 width:383px;
 margin:0px;
 position: relative;
 }

.bg_bottom{
  background: transparent url(../bg_bottom.png) no-repeat;

  height: 131px;
  position: absolute;
  bottom: 0;
  z-index: -1
 }

.bg_top{
  background: transparent url(../bg_top.png) no-repeat;

  height: 140px;
  position: absolute;
  top: 0;
  z-index: -1
 }
.bg_middle{
 height: 100%; /* it does work*/
 background: transparent url(../bg_middle.png) repeat top left;
 position: absolute;
 z-index: -2;
}

height= 100%如果父母（或至少一个）的身高（0的100％为0），则有效。您可以从html开始级联

html, body{height: 100%;}

或者你可以给#left height或min-height

这应该有效

Answer 3

感谢所有人，

昨晚我找到了解决方法。这是我最后的方法，它仍然需要一些小的调整，但它的工作原理（现在）。

<div id="wrap">
<div id="header"></div>
<div id="main">
<div class='bg_top'></div>
<div class='bg_middle'>
<div>LONG LONG TEXT</div>
</div>
<div class='bg_bottom'></div>
</div>

#wrap{
    width: 800px;
    margin: 0px auto;
    border: 1px solid black;
}
.bg_top{
    background: transparent url(../bg_top.png) no-repeat;
    height: 140px;
}
.bg_middle{
    background: transparent url(../bg_middle.png) repeat;
}
.bg_middle div{
    margin:-130px 10px -100px 10px;
    border:1.5px solid #98b73f;
}
.bg_bottom{
    background: transparent url(../bg_bottom.png) no-repeat;
    height: 131px;
}
#main {
    float:left;
    width:500px;
    margin-left:0px;
    padding:10px;
}

感谢@Maroshii的回复。我也会尝试你的方法，但现在我会坚持这一点。希望我不必为浏览器兼容性做太多改变：）

根据另一个拉伸div

3 个答案: