我的问题似乎很基本,但我无法让它工作。
我正在尝试创建一个没有页眉的布局,一个始终位于底部的页脚和两列。右列具有固定宽度(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);
}