请参考这个示例。
我需要让#blue div顶部与#red header底部保持固定距离（比如2em）。换句话说，当#red header垂直尺寸增加时（例如视口缩小导致菜单项换行），#blue div应该被“推”下去。
我更倾向于使用纯CSS解决方案，但如果有人能确认我的感觉是无法仅通过CSS完成的，那么我也需要并感激他们提供关于应连接哪些jQuery函数和哪些DOM事件的建议。
注意：
- 布局可以工作，除了目前#blue div基本上是相对于灰色的#page div垂直定位的。这意味着随着#red header变得更高，#red会在#blue div“后面”而不是“向下推”它。 - HTML是受限制的，除了可以反转#green和#blue div的顺序（在#main div内）以外。 - #blue相对于#page定位，并不是通过逻辑流跟随#red header，因为我要求其#green兄弟的位置：#green的顶部必须与#page的顶部保持固定距离。我通过使#green相对于白色边框的#main div定位，从而实现了这一点。它的水平位置是通过#main绝对定位于#page内来实现的，以实现固定垂直位置。当然，这会影响#blue的位置。我只是不确定是否有一种方法可以将此div“分离”开来，使其返回到更“正常”的流。相对于#page定位#green的方法并不限于此，只要最终#green的结果相同，并且#blue会根据#red换行独立向下移动即可。
非常感谢您的时间！ HTML：
我需要让#blue div顶部与#red header底部保持固定距离（比如2em）。换句话说，当#red header垂直尺寸增加时（例如视口缩小导致菜单项换行），#blue div应该被“推”下去。
我更倾向于使用纯CSS解决方案，但如果有人能确认我的感觉是无法仅通过CSS完成的，那么我也需要并感激他们提供关于应连接哪些jQuery函数和哪些DOM事件的建议。
注意：
- 布局可以工作，除了目前#blue div基本上是相对于灰色的#page div垂直定位的。这意味着随着#red header变得更高，#red会在#blue div“后面”而不是“向下推”它。 - HTML是受限制的，除了可以反转#green和#blue div的顺序（在#main div内）以外。 - #blue相对于#page定位，并不是通过逻辑流跟随#red header，因为我要求其#green兄弟的位置：#green的顶部必须与#page的顶部保持固定距离。我通过使#green相对于白色边框的#main div定位，从而实现了这一点。它的水平位置是通过#main绝对定位于#page内来实现的，以实现固定垂直位置。当然，这会影响#blue的位置。我只是不确定是否有一种方法可以将此div“分离”开来，使其返回到更“正常”的流。相对于#page定位#green的方法并不限于此，只要最终#green的结果相同，并且#blue会根据#red换行独立向下移动即可。
非常感谢您的时间！ HTML：
<body>
<div id="page">page
<header id="red">
<div id="menu-container">
<ul id="nav-menu">
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
<li class="menu-item">menu</li>
</ul>
</div>
</header>
<div id="main">
<div id="blue"></div>
<div id="green"></div>
</div>
</div>
CSS：
body {
/*arbitrary*/
background-color: black;
padding: 0 1em
}
#page {
/*arbitrary*/
background-color: gray;
border-color:gray;
border-width:1pt;
border-style:dotted;
/* necessary - or at least, the achieved result is */
max-width: 1000px;
min-width: 240px;
margin: 0 auto;
/* both blue and green positioned relatively to this div */
position:relative;
}
header {
/*arbitrary*/
background-color: red;
/* necessary - or at least, the achieved result is */
width: 100%;
}
/* necessary - or at least, the achieved result is */
#menu-container {
width: 50%;
}
ul {
list-style: none;
}
.menu-item {
margin: 0 0.25em 0 0.25em;
display: inline-block;
}
#main {
/*arbitrary*/
border-color:white;
border-width:1pt;
border-style:dotted;
/* necessary - or at least, the achieved result is */
position:absolute;
top: .5em;
width: 100%;
}
#green {
/*arbitrary*/
background-color: green;
height: 15em;
/* necessary - or at least, the achieved result is */
z-index: 100;
width: 40%;
position: relative;
left: 50%;
}
#blue {
/*arbitrary*/
background-color: blue;
height:3em;
/* necessary - or at least, the achieved result is */
width:100%;
/**** here's the problem - top of blue currently 5em below top of grey page.
But I want it 2em below bottom of red header nomatter how tall red header is ****/
position: absolute;
top:5em;
}