2

我有一个布局，我希望主要内容区域是剩余空间的 100% 高度。所以我快到了，但底部被截断（这会影响缩放和居中）。从底部有 41px 被截断，这是标题区域的测量值：http: //jsfiddle.net/GTscW/

我知道它是否被切断的原因是因为我没有看到谷歌地图的版权信息。这是未截断的，但截断了顶部（我刚刚从#content .inner-content 中删除了顶部：41px）：http: //jsfiddle.net/GTscW/1/

如何从第一个样本的底部减去 41px 以获得剩余区域的 100% 内容？

编辑：

我能够添加这个：$('#content .inner-content').height($(this).height() - $('#header').height())，但实际上没有 CSS 解决方案？？？

4

3 回答 3

0

一个问题是混合百分比和像素测量并不容易，因为不同的屏幕尺寸会表现不同。但是可以使用 API 功能让地图在任何尺寸的屏幕上按照您想要的方式运行。

将地图设为屏幕大小的 100%，因此标题会遮挡地图的一部分。抑制默认地图控件，使其不会出现部分遮挡。创建一个与标题相同大小的空自定义控件，并将其放置在地图的顶部。当重新添加地图控件时，自定义控件会将它们从通常的位置推出，以便它们在可见地图上看起来正确。

var posn=google.maps.ControlPosition; // shorten the reference

// Add empty custom control
var controlDiv = document.createElement('div');
controlDiv.style.width='100%';
controlDiv.style.height='41px';
map.controls[posn.TOP_LEFT].push(controlDiv);
map.controls[posn.TOP_RIGHT].push(controlDiv);

// Add map controls
map.setOptions({
    mapTypeControlOptions:{position:posn.RIGHT_TOP},
    mapTypeControl:true,
    panControlOptions:{position:posn.LEFT_TOP},
    panControl:true,
    streetViewControlOptions:{position:posn.LEFT_TOP},
    streetViewControl:true,
    zoomControlOptions:{position:posn.LEFT_TOP},
    zoomControl:true
})

http://jsfiddle.net/GTscW/4/

注意 1：因为地图实际上比看起来大 41px（在您的情况下），所以中心点将比可查看地图的中心高 20px。这可能不值得担心。如果是，那么处理一个明显的中心点是关于 SO 的另一个问题的主题。

注意 2：此方法无法获得固定页脚，因为 Google 徽标和条款链接始终位于地图底部，并且 [当前] 不会移动以避免控制。

于 2012-07-08T08:34:53.963 回答
0

我用一个解决方案编辑了你的小提琴：http: //jsfiddle.net/T2Nkk/

基本上，创建一个看起来像这样的函数：

function remainder() {
    $("*[height=\"remainder\"]").each(function(index, element) {
        var offsetParent;
        var target = $(element);
        if (element==$("body")[0]) {
            offsetParent = $("html");
        }
        else {
            offsetParent = target.offsetParent();
        }
        var position = target.position();
        var heightParent = offsetParent.height();
        var extras = target.outerHeight(true)-target.height();
        var remainderHeight = heightParent-position.top;
        target.height(remainderHeight-extras);
    });
}

对于要占据页面其余部分的元素，请执行以下操作：

<div id="content" data-role="content" height="remainder">

最后，当您的文档准备就绪时：

$(document).ready(function() {
    remainder();
});
于 2012-07-08T12:35:50.143 回答
0

只有在 css 中你可以尝试使用一个技巧：像我在你的小提琴上一样使用属性top和bottom属性：http: //jsfiddle.net/GTscW/23/position: absolute

不知道它是否在任何地方都有效。

于 2013-05-06T12:15:15.783 回答