twitter-bootstrap - Twitter ブートストラップ ライブラリを使用した、ヘッダーとフッターが固定された単一ページの Web アプリ

Question

基本的に、単一ページ Web アプリの次のレイアウトを思いつきました。私はできません

1. フッターを画面の下部に固定します。
2. margin-left によって生じた 2 つのスパン クラス間の空白を削除します。これはレスポンシブ twitter css から来ています。
3. 検索ボックスと左下フッターの間の領域のみをスクロールします。

私は基本的に次のレイアウトを持っています

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <!--Search -->
            <!--scrollable div which doesn't scroll. Actually the scrollbar is for the html body instead of div-->
        </div>
    </div>
    <div class="span9"> <!--unnecessary postive value for margin-left -->
        <!--Header -->
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <!--unnecessary white space on the right -->
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6">
                </div>
                <div class="span6">
                </div>
                <!--margin-left from twitter responsive css > 0 hence showing whitespace -->
            </div>
        </div>
    </div>
</div>

ページ レイアウトは、Steve Sanderson のフル ハイト アプリレイアウトに触発されています。