如何使用CSS布局获得固定位置的页脚，固定宽度的右列，其余列为剩余列？

我的问题似乎很基本，但我无法让它工作。如何使用CSS布局获得固定位置的页脚，固定宽度的右列，其余列为剩余列？

我试图创建一个没有标题，总是在底部和两列的页脚布局。右列有一个固定宽度（770px），左列应该使用剩余空间。在左栏中将使用OpenLayers，它将获取Google Maps图像以填充空间。

该页面也需要在较小的屏幕上显示，并且应该可以在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); 
}

来源

2012-05-03 Paul Meems

如果我理解正确的话您的问题，我做了一个小提琴表现出的方式来处理你的问题：

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

此外，还有一个按钮出现，来模拟全球调整大小:)

注：

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

来源

2012-05-03 10:29:15 Zuul

谢谢@zuul你的例子看起来不错。但我不明白在调整视口大小时它是如何工作的。我尝试调整小提琴输出窗格的大小，但这并没有使左列变宽或变小。 –

按下按钮，该按钮模拟调整大小...基本上，结构动态地使用作为参考点的包装的大小增长和收缩！如果你的包装获得了百分比的宽度，它将随着视口尺寸的增大而相应缩小！（对于这个测试，我使用了固定的宽度来让你明白发生了什么） – Zuul

我已经用基于你的例子的解决方案更新了我的问题。 –

如何使用CSS布局获得固定位置的页脚，固定宽度的右列，其余列为剩余列？

回答

相关问题