html - CSS根据另一个div的动态高度定位一个div

Question

在我的网站布局中，我使用负边距将左栏向上移动到横幅旁边，使其重叠。问题是我不知道最终版本中横幅的高度是多少。起初我在左列上使用了 position:absolute ，但这行不通，因为它需要成为布局的一部分，并在必要时下推页脚。我想知道如何将左栏定位到页面顶部，因为这样我就可以将上边距设置为与标题相同的高度，因为这不会改变高度。我可以用 javascript 解决这个问题，但我想避免这种情况并使用纯 css。

https://jsfiddle.net/z77fwaj7/1/

#Header
{
    background-color: gray;
    height: 50px;
}
#Banner
{
    background-color: orange;
    height: 50px;
}
#Content
{
    background-color:white;
    border:1px solid red;
    max-width:500px;
    margin:0px auto;
}
#LeftColumn
{
    float:left;
    height:200px;
    width:25%;
    background-color: blue;
    margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
    float:left;
    height:200px;
    width:45%;
    background-color: yellow;
}
#RightColumn
{
    float:left;
    height:250px;
    width:30%;
    background-color: green;
}
#Footer
{
    background-color: gray;
    height: 50px;
}

<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
    <div id="LeftColumn">left</div>
    <div id="MiddleColumn">middle</div>
    <div id="RightColumn">right</div>
    <div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>

Answer 1

这样可以吗

<style type="text/css">
#Header
{
    background-color: gray;
    height: 50px;
}
#Banner
{
    background-color: orange;
    height: 50px;
}
#Content
{
    background-color:white;
    border:1px solid red;
    max-width:500px;
    margin:0px auto;
}
#LeftColumn
{
    float:left;
    height:200px;
    width:25%;
    background-color: blue;
    margin-top:0px;
}
#MiddleColumn
{
    float:left;
    height:200px;
    width:45%;
    background-color: yellow;
}
#RightColumn
{
    float:left;
    height:250px;
    width:30%;
    background-color: green;
}
#Footer
{
    background-color: gray;
    height: 50px;
}
</style>

<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
    <div id="LeftColumn">left</div>
    <div id="MiddleColumn">middle</div>
    <div id="RightColumn">right</div>
    <div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>