Question

我正在尝试创建一个效果，其中蓝色部分延伸到灰色部分。

蓝色部分目前包含在灰色部分中，这可能是问题所在。

我把它作为HTML：

<div id="header-wrapper">

  <div id="header">

...

</div></div>

这就是CSS：

#header-wrapper {
width: 100%;
background-color: #686868;
}

#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
}

如何获得它以使蓝色部分在灰色部分中居中，并且仍然可以在灰色部分下方（即，蓝色部分的高度更高）。

Answer 1

尝试使用z-index和固定高度：

CSS：

#header-wrapper {
width: 100%;
background-color: #686868;
height:30px;
}

#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
z-index:10;
height:50px;
}

这里的jsFiddle演示：http://jsfiddle.net/LynchJustRules/RQV4h/

Answer 2

只需提供＃header-wrapper height即可。如果您希望在高度小于灰色框的情况下始终适合蓝框的高度，请设置max-height

#header-wrapper {
  width: 100%;
  background-color: #686868;
  max-height: 92px;
}

试图将内部div高度扩展到容器div高度

2 个答案: