1

我的问题似乎很基本，但我无法让它工作。

我正在尝试创建一个没有页眉的布局，一个始终位于底部的页脚和两列。右列具有固定宽度（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);
}
4

1 回答 1

2

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

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

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

笔记：

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

于 2012-05-03T10:29:15.903 回答