html - div をページの残りの部分に拡張するための絶対配置?

Question

私の問題については画像を参照してください。どんな入力でも大歓迎です!

画像リンク: http://i.stack.imgur.com/cgSqC.png

役立つ場合は、テンプレートのフィドルを次に示します。

http://jsfiddle.net/JUnTn/

HTML:

<div id="map-header">
TOP HEADER
</div><!-- end map-header -->


<div id="map-column">
LEFT COLUMN
</div><!-- end map-column -->


<div id="map-container">
    FILLS THE REST OF THE PAGE
</div><!-- end map-container -->

CSS

html{
            height:100%;
            width:100%;
        }
        body {
            height:100%;
            width:100%;
            margin:0;
            padding:0;
        }

        #map-header{
            clear:both;
            width:100%;
            height:100px;
            border-bottom:2px dotted gray;
            -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
        }
        #map-column{
            width:100px;
            float:left;
            background-color:green;
            border-right:2px dotted gray;
            -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
        }
        #map-container{
            float:left;

            -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
        }

編集:これについてはまだ支援を求めていますが、スタックについて行ったいくつかの調査に基づいてこれを取得しました: http://jsfiddle.net/SpSjL/1152/

まだ私が必要としているものではありません。どんな助けも大歓迎です!

Answer 1

これがあなたが望むものであることを願っています。更新されたフィドルhttp://jsfiddle.net/JUnTn/2/を参照してください

2 つの div を別の div でラップしました。

#test{
width:100%;
}
#map-column{
width:10%;
float:left;         
}
#map-container{
float:left;
width:90%;
}

Answer 2

<div id="map-column">
    LEFT COLUMN
</div><!-- end map-column -->
<div id="map-container">
    FILLS THE REST OF THE PAGE
</div><!-- end map-container -->
<br class="clear" />

CSS

br.clear{
    clear: both;
}
#map-column{
    float: left;
    width:100px;
}
#map-container{
    float: right;
}

Jクエリ

$(document).ready(function() {
    var myWidth = $(window).width() - 100;
    $('#map-container').css('width',myWidth);
});

Answer 3

これを取得するには、クールな上下左右のトリックを使用できます（ピンタレストから入手）。通常、端から端までフルスクリーンにしたいときは、

.full_container{ top: 0, right: 0, bottom: 0, left: 0 }

あなたのシナリオでは、100px の上部と左側のパディングが必要なので、

.full_container{ top: 100px, left: 100px, right: 0, bottom: 0 }

• これは、絶対配置を使用していると仮定していることに注意してください。