Html 如何将绝对元素与其父元素上方的可变高度垂直对齐？

我有一个CSS布局，实际上是这样的：

|---------------------|
|                     |
|                     |
|                     |
|------------|--------| 
|            |   ***  | < article header
|   main     |--------| 
|  content   |        |
|            |        | 
|------------|--------|

---

非常感谢

尝试使用

底部：100%

而不是使用

顶部

。您可以使用

边距顶部

微调此对齐方式，例如调整几个像素。

请检查此编辑的小提琴。。。 带有

减边距和绝对显示

更改#侧边栏，如下所示

#sidebar{
    float:left;
    width:33%;
    background-color:#DDD;
    padding:1%;
    margin-top:-25px;
}

---

你愿意使用JQuery吗？@JamesKing，因为，当然，@JamesKing：我尽量不使用JQuery，只要可能。。。但我在下面得到了答案。谢谢如果高度改变了怎么办？@JamesKing，你的答案是什么。。任何答案都会受到其高度的影响。。在votedown之前一定要想一想……这个问题确实说明了高度是可变的，因此这个答案不能解决问题it@JamesKing这就是我问你正确答案的原因。。如果你能在我的答案中找到问题，那么你也必须知道正确的答案。。

<div id="content">
    <div id="inner-content">
        <div id="main"></div>
        <div id="sidebar">
            <article>
                <header>article header</header>
                <p>article content</p>
                <footer>article footer</footer>
            </article>
        </div>
    </div>
</div>

#content {
    margin-top: 10em;
}
#inner-content{
    max-width: 1140px;
    width: 96%;
    margin: 0 auto;
}
#main{
    position: relative;
    float: left;
    border-top:1px solid blue;
    width:65%;
}
#sidebar{
    float:right;
    width:33%;
    background-color:#DDD;
    padding:1%;
}
#sidebar article{
    position:relative;
}
#sidebar article header{
    border-bottom:1px solid blue;
    position:absolute;
    top:0;
}

#sidebar{
    float:left;
    width:33%;
    background-color:#DDD;
    padding:1%;
    margin-top:-25px;
}