Question

查看我的问题的图片，任何输入将不胜感激！

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

如果它有帮助，这里有一个模板小提琴：

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

我希望这就是你想要的，看到更新的小提琴http://jsfiddle.net/JUnTn/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;
}

Jquery的

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

Answer 3

你可以使用一个很酷的左上角左手技巧来获得这个（来自pinterest）。当我通常需要全屏，边缘到边缘时，我会使用，

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

在您的方案中，由于您需要100px的左上角和左上边距，

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

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

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

3 个答案: