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

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

#标题
{
背景颜色：灰色；
高度：50px；
}
#横幅
{
背景颜色：橙色；
高度：50px；
}
#内容
{
背景色：白色；
边框：1px纯红；
最大宽度：500px；
保证金：0px自动；
}
#左列
{
浮动：左；
高度：200px；
宽度：25%；
背景颜色：蓝色；
利润顶部：-51px；/*这需要是动态的*/
}
#中柱
{
浮动：左；
高度：200px；
宽度：45%；
背景颜色：黄色；
}
#右栏
{
浮动：左；
高度：250px；
宽度：30%；
背景颜色：绿色；
}
#页脚
{
背景颜色：灰色；
高度：50px；
}

标题
横幅
左边
中间的
正确的
页脚

这样行吗

<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>

#标题
{
背景颜色：灰色；
高度：50px；
}
#横幅
{
背景颜色：橙色；
高度：50px；
}
#内容
{
背景色：白色；
边框：1px纯红；
最大宽度：500px；
保证金：0px自动；
}
#左列
{
浮动：左；
高度：200px；
宽度：25%；
背景颜色：蓝色；
边际上限：0px；
}
#中柱
{
浮动：左；
高度：200px；
宽度：45%；
背景颜色：黄色；
}
#右栏
{
浮动：左；
高度：250px；
宽度：30%；
背景颜色：绿色；
}
#页脚
{
背景颜色：灰色；
高度：50px；
}
标题
横幅
左边
中间的
正确的
页脚

如果有人好奇，我必须更改布局，以便在没有javascript的情况下工作。背景横幅收缩时不会改变高度，但在我的情况下，这并不重要，因为它无论如何都会消失在视野之外

css:

html:

标题
左边
横幅
中间的
正确的
页脚

作为结论：
在css中的另一个元素上使用元素的值是不可能的。（据我所知）
因此有两种解决方案：

更改布局

使用javascript

我想要第二个。不知道为什么这么做是如此的遗憾。

---

一个简短的javascript比搞乱布局更好。（在我看来）

我需要左列覆盖在横幅上。你的人不会那么做的，

#Header
{
    background-color: gray;
    height: 50px;
}
#Background
{
    position:absolute;
    width:100%;
    z-index:-1;
}
#BackgroundBanner
{
    height: 50px;
    background-color:orange;
}
#Banner
{
    float:left;
    background-color: orange;
    height: 50px;
    width:75%;
}
#Content
{
    background-color:white;
    border:1px solid red;
    max-width:500px;
    margin:0px auto;
}
#LeftColumn
{
    float:left;
    height:200px;
    width:25%;
    background-color: blue;
}
#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="Background">
    <div id="BackgroundBanner"></div>
</div>
<div id="Content">
    <div id="LeftColumn">left</div>
    <div id="Banner">banner</div>
    <div id="MiddleColumn">middle</div>
    <div id="RightColumn">right</div>
    <div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>