Css 侧菜单div高度不随主div扩展

我有一个.page

，它包围了里面的所有内容。当内容拉伸时，.page

也会拉伸

我的主要问题是.leftBannerBackground

不能与.page

一起扩展

我能做些什么使.leftBannerBackground的高度与.page一起延伸吗

HTML的简短版本：

    <div class="page">
        <div class="header">
            <div class="top_banner">
            </div>
            <div class="title">
                <h1 class="siteColor centeredText">
Header                </h1>
            </div>
        </div>
        <div class="leftBanner">
        </div>
        <div class="leftBannerBackground">

        </div>



        <div class="main">
            <!-- Content goes here -->
          <div class="leftSide">


          </div>

            <div class="rightSide" style="margin-top: 35px;"></div>


        </div>
        <div class="bottomFiller"></div>


        <div class="footer">

        </div>
    </div>

标题

CSS:

/*默认值
----------------------------------------------------------*/
身体
{
背景：#ffffff；
字体大小：.80em；
字体系列：“Helvetica Neue”，“Lucida Grande”，“Segoe UI”，Arial，Helvetica，Verdana，无衬线；
/*边际：0px*/
文本对齐：对齐；
填充：0px；
颜色：#000000；
/*高度：自动！重要；
身高：100%；
最小高度：100%*/
}
P
{
边缘底部：10px；
线高：1.2米；
}
/*标题
----------------------------------------------------------*/
h1、h2、h3、h4、h5、h6
{
字号：1.5em；
颜色：#666666；
字体变体：小大写字母；
文本转换：无；
字号：200；
边缘底部：0px；
}
h1
{
字号：1.6em；
垫底：0px；
边缘底部：0px；
}
氢
{
字号：1.5em；
字号：600；
}
h3
{
字体大小：1.2米；
}
h4
{
字体大小：1.1米；
}
h5，h6
{
字号：1em；
}
/*此规则设置了所需的样式和标记
左表列和右表列的第一个子项*/
.rightColumn>h1、.rightColumn>h2、.leftColumn>h1、.leftColumn>h2
{
边际上限：0px；
}
/*主要布局元素
----------------------------------------------------------*/
页
{
宽度：960px；
背景色：#fff；
/*保证金：20px自动0px自动*/
边框：1px实心#496077；
位置：绝对位置；
顶部：20px；
左：50%；
左边距：-480px；
}
.标题
{
位置：相对位置；
边际：0px；
填充：0px；
背景：#FFFFFF；
宽度：100%；
}
.标题h1
{
字号：700；
边际：0px；
填充：0px 0px 0px 20px；
颜色：#f9f9f9；
边界：无；
线高：2米；
字号：2em；
}
梅因先生
{
位置：相对位置；
填充：4PX12PX8PX6PX；
保证金：220px 0px 0px 150px；
宽度：790px；
最小高度：390px；
顶部：10px；
溢出：自动；
}
.底部填料
{
最小高度：0px；
}
leftCol先生
{
填充：6px 0px；
保证金：12px 8px 8px 8px；
宽度：200px；
最小高度：200px；
}
.页脚
{
位置：相对位置；
颜色：#ffffff；
填充：8px 0px 0px 0px；
保证金：0px自动；
文本对齐：居中；
线高：正常；
背景色：#9B0707；
最小高度：20px；
/*边缘底部：40px*/
}
.合伙人
{
位置：相对位置；
宽度：126px；
高度：46px；
底部：20px；
z指数：6800；
}
/*选项卡菜单
----------------------------------------------------------*/
希德斯基普林克分区
{
宽度：100%；
}
分区菜单
{
位置：相对位置；
填充：0px 0px 0px 16px；
边缘顶部：275px；
利润底部：0%；
身高：100%；
/*顶部：200px；
利润率：275px 0px*/
}
分区菜单ul li a，分区菜单ul li a：已访问
{
颜色：#FCE756；/*文本颜色*/
字号：中等；
显示：块；
列表样式：无；
线高：1.95em；
填充物：4px 5px；
文字装饰：无；
空白：nowrap；
}
分区菜单ul li a：悬停
{
颜色：#ffffff；
文字装饰：无；
}
/*形式元素
----------------------------------------------------------*/
字段集
{
利润率：1百万像素；
填充：1em；
边框：1px实心#ccc；
}
字段集p
{
保证金：2x12px 10px 10px；
}
fieldset.login标签、fieldset.register标签、fieldset.changePassword标签
{
显示：块；
}
fieldset label.inline
{
显示：内联；
}
传奇
{
字体大小：1.1米；
字号：600；
填充：2px4px8px4px；
}
input.textEntry
{
宽度：320px；
边框：1px实心#ccc；
}
input.passwordEntry
{
宽度：320px；
边框：1px实心#ccc；
}
部门会计信息
{
宽度：42%；
}
/*杂项
----------------------------------------------------------*/
.siteColor
{
颜色：#9B0707！重要；
}
.centeredText
{
文本对齐：居中；
}
清楚的
{
明确：两者皆有；
}
.leftBannerSpaceFiller
{
位置：相对位置；
浮动：左；
背景色：#9B0707；
身高：100%；
宽度：132px；
}
标题
{
显示：块；
浮动：对；
文本对齐：左对齐；
右：250px；
宽度：自动；
位置：绝对位置；
边缘顶部：8px；
}
.top_横幅
{
背景图像：url（'../Images/topBanner.png'）；
顶部：66px；
左：50px；
高度：164px；
宽度：911px；
位置：绝对位置；
z指数：6900；
}
.左边{
浮动：左；
宽度：468px；
}
.leftSidecont{
浮动：左；
宽度：790px；
}
.leftSideteam{
浮动：左；
宽度：540px；
}
.左撇子{
浮动：左；
宽度：268px；
}
.右侧{
浮动：对；
宽度：300px；
}
.rightSidecont{
位置：绝对位置；
宽度：400px；
}
.rightSideteam{
浮动：对；
宽度：228px；
}
.右侧留置权{
浮动：对；
宽度：500px；
}
.左旗
{
背景图像：url（'../Images/leftBanner.png'）；
高度：592px；
宽度：52px；
边缘顶部：30px；
位置：绝对位置；
z指数：3600；
}
.左横幅背景
{
位置：相对位置；
背景色：#9B0707；/*#a40a0a*/
宽度：132px；
z指数：1600；
浮动：左；
身高：100%；
利润底部：0%；
}
.loginDisplay
{
字体大小：1.1米；
显示：块；
文本对齐：右对齐；
填充：10px；
颜色：白色；
}
大胆的
{
字体大小：粗体；
}

您有两个选择：

在.leftBannerBackground上使用绝对定位，并设置

top:0px和
底部：0px。演示：