固定高度元素下侧栏中的动态高度元素

Question

我为用户应用程序提供了流畅的CSS布局。目标是大内容区域（白色）和深蓝色#notiarea将扩展以填充客户端桌面。目标是让#notiarea扩展以填充用户桌面的其余部分。

#notiarea和内容div将有一个内容滚动条，如下图所示。

我的问题是如何让darkblue（#notiarea）元素仅扩展到应用程序视图区域的其余高度？ 如何让#notiarea在所有固定高度元素下变得高度流动，而不是我需要能够使用css标签“overflow：auto;”？我更喜欢css解决方案，但我会接受jQuery解决方案。

源代码：这是一个用于快速实验的jsfidle：http://jsfiddle.net/YLZRb/

Answer 1

没有解释（我希望代码能说明问题）我给你的是语义方法..

http://jsfiddle.net/YLZRb/6/

<header>

</header>
<div class="content">
    <aside>
        <section class="post">

        </section>
    </aside>
    <section class="main">

    </section>
</div>

和css

html,body{
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
body {
    background-color: #a3badc;
}
header {
    background-color: #515c6e;
    height:67px;
    box-shadow: rgba(0, 0, 0, 0.746094) 0px 5px 5px 0px;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.content {
    height: 100%;

}
.content aside {
    position: fixed;
    background-color: #032d3b;
    width: 230px;
    height: 100%;
    top: 67px;
    left: 0px;
}
.content aside .post {
    width: 100%;
    height: 220px;
    background-color: #1d779c;
}
.main {
    margin-top: 67px;
    display: inline-block;
}

    

Answer 2

好的！在这里...... http://jsfiddle.net/Ghcgr/

Jsfiddle有css问题，因为它的iframe属性和css将在独立页面上工作。 确保您确定clear，float和width [侧栏和ajxpage]