html - 绝对定位使 div 扩展页面的其余部分？

Question

请查看我的问题的图片，我们将不胜感激!

图片链接:http://i.stack.imgur.com/cgSqC.png

如果有帮助，这里有一个带有模板的 fiddle :

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;
        }

编辑:仍在寻求这方面的帮助，到目前为止，我是根据我围绕 Stack 所做的一些研究得到的: http://jsfiddle.net/SpSjL/1152/

仍然不是我所需要的，感谢任何帮助!

Answer 1

我希望这是你想要的，请参阅更新的 fiddle http://jsfiddle.net/JUnTn/2/

我将两个 div 包裹在另一个 div 中。

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