Question

第一次提问：）

我的标题DIV的背景像波浪一样弯曲。我有一个侧边栏浮动到位于标题DIV下面的DIV右侧。标题的背景图像向右弯曲，其中侧边栏留下了侧边栏触及标题div底部的间隙（因为显然div不是弯曲的）。我需要侧边栏的背景在标题下面延伸，所以没有间隙。我该怎么办？

HTML：

<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>

CSS：

#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
    background-repeat:no-repeat;
text-align:center;

}

#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;

}

#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;

}

#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
    border-right:thick #558c21 solid;
    border-left:thick #558c21 solid;

}

！[这是当前的截图。侧边栏没有内容，因此它很窄，但我希望它延伸到标题图像后面，这样就没有间隙了。1

Answer 1

不确定我是否理解正确但尝试添加：

position: relative;
top: -10px;

到＃side-bar，你可以在这里看到http://jsfiddle.net/NpZJV/

如果我可以建议，请不要使用％作为宽度/高度，而是使用px代替。

Answer 2

不是100％肯定你想要实现的目标，但如果你想让侧边栏显示在标题后面并向上延伸，请尝试添加侧边栏样式：

margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;

Answer 3

您可以使用CSS3制作背景尺寸，检查它是否能解决您的问题。 http://www.w3schools.com/cssref/css3_pr_background-size.asp 尝试使用

background-size: 600px 2921px;

您可能能够使其适合

DIV背景延伸到另一个DIV背后

3 个答案: