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

【问题标题】：absolute positioning to make a div extend the rest of the page?绝对定位使 div 扩展页面的其余部分？
【发布时间】：2013-08-28 01:17:16
【问题描述】：

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

图片链接：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/

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

【问题讨论】：

我把我的代码放在小提琴里，它不会让我发布没有“伴随”代码的链接
请在此处粘贴代码以及所有其他相关部分。表现出一些努力。
好吧，我这样做了。抱歉，这一切都是新手
嗨，你为什么不使用这个$("#map-container").css("width", screen.width);这就是我使用的。这是完美的！另外，请继续使用position: absolute
另外，它的 jQuery！所以在脚本中使用它。

标签： html css absolute

【解决方案1】：

我希望这是你想要的，查看更新的小提琴http://jsfiddle.net/JUnTn/2/

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

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

【讨论】：

我最初尝试过这个，但我决定我希望将左侧和顶部栏固定在 100 像素而不是 10%

【解决方案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);
});

【讨论】：

【解决方案3】：

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

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

在您的场景中，由于您想要 100 像素的顶部和左侧填充，您可以做到，

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

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

【讨论】：