要實現如下圖所示的佈局：

說明：這種頁面佈局十分常用，上方為固定高度，下方自動填滿下方高度；下方左側為固定寬度，下方右側自動填滿剩餘寬度。

<style>
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
</style>
 

<div class="outer">
    <div class="A">
        時空資訊雲平臺<span>管理中心</span>
    </div>
    <div class="B">
        <div class="leftp" style="width:300px;height:100%;background-color:red;float:left;">
        </div>
        <div class="rightp" style="margin-left:300px;height:100%">
        </div>
    </div>
</div>