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

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

仍然不是我所需要的，任何帮助表示赞赏！

Answer 1

您可以使用一个很酷的左上右下技巧来获得这个（从 pinterest 获得）。当我通常想要一个全屏，边缘到边缘时，我使用，

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

在您的场景中，由于您想要 100px 的顶部和左侧填充，您可以这样做，

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

• 请注意，这是假设您使用的是绝对定位。

Answer 2

我希望这是您想要的，请参阅更新的小提琴http://jsfiddle.net/JUnTn/2/

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

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

Answer 3

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

jQuery

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