如何使用 CSS 布局获得固定位置的页脚、固定宽度的右列和左列？

Question

我的问题似乎很基本，但我无法解决。

我正在尝试创建一个没有页眉的布局，一个始终位于底部的页脚和两列。右列具有固定宽度（770 像素），左列应使用其余空间。在左侧列中，将使用 OpenLayers，它将获取 Google 地图图像以填充空间。

该页面也需要在较小的屏幕上可见，并且应该可以在 FF、Chrome 和 IE7+ 中运行。 我从最小宽度为 1200 像素的包装器开始。这适用于较小的屏幕。然后会出现滚动条。 接下来，我在包装器内创建了 3 个 div：leftframe、rightframe、bottomframe。 底部框架使用了这个 CSS：

bottom: 0; 
height: auto; 
left: 0; 
overflow: hidden; 
position: fixed; 
right: 0; 
top: auto; 
width: auto; 
min-width: 700px; 
z-index: 5000;

这很好用。页脚总是很好地位于底部。

现在问题来了。当我调整视口大小或在小屏幕上显示页面时，leftframe 必须调整大小以填充剩余空间。我已经尝试了很多：浮动，位置。 似乎起作用的是绝对定位右框架并给左框架一个与右框架的宽度相同的边距（770px）：

#leftframe { 
  width:auto; 
  height: 100%; 
  margin-right: 770px;
}
#rightframe {
  position: absolute;
  right: 0;
  top: 0;
  width: 770px;
}

这似乎也有效。至少在宽度上。

右侧的帧动态填充了我使用 AJAX 获得的数据。在某些情况下，返回的数据大于我给包装器的最小高度。这对右框架来说很好，它的高度是调整的，但包装器的高度不是，因此左框架的高度也没有调整。这导致右框架高于我的左框架，并且我的左框架和页脚之间有一个空白区域。

如何解决这个问题？最好不使用 jQuery 或类似但仅使用 CSS。

[编辑] 使用 Zuul 提供的示例，我创建了这几行 jQuery，现在它似乎可以工作了。 当我处理完 AJAX 数据时会调用这些行。

var currentHeightRight = parseInt($("#rightframe").css("height").replace("px", ""), 10);
var currentHeightWrapper = parseInt($("#wrap").css("height").replace("px", ""), 10);
if (currentHeightRight > currentHeightWrapper)
{ 
  $("#wrap").css("height", currentHeightRight);
  $("#map").css("height", currentHeightRight);
}

Answer 1

如果我正确理解了您的问题，我制作了一个 Fiddle 来展示解决您问题的方法：

http://jsfiddle.net/zuul/TdTCU/

此外，那里还有一个按钮，用于模拟全局调整大小:)

注意事项：

此类问题的更好解决方案是元素在包装器内的绝对位置。基本上为所有休息建立了一个结构。