Css 如何固定100%高度布局的底部（jquerymobile和googlemap）？

我有一个布局，我希望主要内容区域是100%的剩余空间的高度。因此，我几乎在那里，但底部被截断（这会影响缩放和居中）。从底部开始有41px被截断，这是收割台区域的测量值：

我之所以知道它是否被切断，是因为我没有看到谷歌地图的版权信息。下面是未截断的，但截断了顶部（我刚刚从#content.internal content中删除了top:41px）：

如何从第一个样本的底部减去41px，得到剩余区域的100%含量

编辑：

---

我只添加了：$（“#content.internal content”）.height（$（this.height（）-$（“#header”）.height（）），但实际上没有CSS解决方案？？？

一个问题是，混合百分比和像素测量并不容易，因为不同的屏幕大小会表现不同。但是，可以使用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
})

注1：因为地图实际上比看起来大41像素（在您的例子中），所以中心点将比可视地图的中心高20像素。这可能不值得担心。如果是这样的话，那么处理一个明显的中心点就是本文的主题

---

注2：这种方法无法获得固定的页脚，因为Google徽标和术语链接始终位于地图的底部，[当前]不会移动以避免控件。

一个问题是，混合百分比和像素测量并不容易，因为不同的屏幕尺寸会表现不同。但是，可以使用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
})

注1：因为地图实际上比看起来大41像素（在您的例子中），所以中心点将比可视地图的中心高20像素。这可能不值得担心。如果是这样的话，那么处理一个明显的中心点就是本文的主题

---

注2：此方法无法获得固定页脚，因为谷歌徽标和术语链接始终位于地图底部，[当前]不会移动以避免控件。

我用一个解决方案编辑了你的小提琴：

基本上，创建一个如下所示的函数：

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">

---

我用一个解决方案编辑了你的小提琴：

基本上，创建一个如下所示的函数：

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">

---

在css中，您只能尝试使用一个技巧：在

位置：绝对
属性上同时使用
top
和
bottom
属性，就像我在您的小提琴上做的那样：

但不知道它是否适用于所有地方。
在css中，只有你可以尝试使用一个技巧：在
位置：绝对属性上同时使用
顶部
和
底部
属性，就像我在你的小提琴上做的那样：

但我不知道它是否适用于所有地方