Question

我的问题似乎非常基本，但我无法让它发挥作用。

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

该页面也需要在较小的屏幕上可见，并且应该在FF，Chrome和IE7 +中运行。我开始使用最小宽度为1200px的包装器。这适用于较小的屏幕。然后会出现滚动条。接下来，我在包装器中创建了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;

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

现在问题来了。当我调整视口大小或在小屏幕上显示页面时，左框架必须调整大小以填充剩余空间。我已经尝试了很多：浮动，位置。似乎工作的是绝对定位右框架并给左框架一个边距 - 右边框架的宽度（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

如果我已正确理解你的问题，我已经做了一个小提琴来展示一种方法来处理你的问题：

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

此外，还有一个按钮，用于模拟全局调整大小：）

备注：

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

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

1 个答案: