CSS-三个可滚动的等高主要内容列(流体高度)和粘滞/始终可见的页脚 [英] CSS - Three Scrollable Equal-Height Main Content Columns (Fluid-Height) and Sticky/Always-Visible Footer

问题描述

我已经看过这里和Google上的几乎所有帖子，但是似乎找不到我的CSS布局问题的答案，该问题涉及"3个等高列，并带有'真正'粘滞的页脚"以及布局要求如下:

1. 顶部标题部分，其中一行用于下拉菜单选项，另一行用于工具栏按钮.

2. 主要内容部分，带有3个等高的列.中间的列将具有液体宽度，左侧和右侧的列将具有固定的宽度.所有3列都将具有可变的高度/可变的高度，并且如果所包含的内容超出了该列的可用可见内容区域的容纳量，则EACH COLUMN将自动显示/使用其自己的滚动条.换句话说，如果任何列的内容很长，则这些列不应下推其下方的粘性"页脚部分，而应显示/使用滚动条供用户滚动浏览内容.

3. 页脚部分(粘滞/固定)，无论主要内容"部分中三列中的任何内容的长度如何，都必须始终在窗口/视口的底部可见.页脚不应被其上方的三列中的任何一列向下推，并且必须确实发粘"并且始终在视口中可见.

我已经花了数周的时间来寻找答案，但是我所见过的有关(三)带有粘性页脚的等高列"的所有解决方案都不会阻止主要内容"部分的列推动"页脚如果任何内容列中的内容太长，则向下.

我真的希望有人可以对此提供帮助.预先感谢！

解决方案

您的意思是这样的吗?参见小提琴: http://jsfiddle.net/NGLN/R6F5q/2/.

在IE7，IE8，IE9，Opera 11，FF 4，Chrome 12，SafariWin 5的Win7上进行了测试.

I've looked at practically all the posts here and on Google and can't seem to find the answer to my CSS layout question about "3 equal-height columns with a 'really' sticky footer", with the layout requirements as follows:

1. Top Header section, with a row for drop-down Menu options and another row for Toolbar buttons.

2. Main Content section, with 3 equal-height columns. The center column will have liquid width, the left and right columns will have fixed widths. All 3 columns will have fluid/variable heights, and EACH COLUMN will automatically show/use its own Scroll Bar if there is more content than will fit in the available, visible content area of the column. In other words, the columns should NOT push down the "sticky" Footer section below them if any column has long content, but instead show/use a Scroll Bar for the user to scroll through content.

3. Footer section (sticky/fixed), which must ALWAYS be visible at the bottom of the window/viewport regardless of the length of the content in any of the 3 columns in the Main Content section. The footer should not be pushed down by any of the 3 columns above it, and must be really "sticky" and always visible on the viewport.

I've literally spent weeks looking for an answer, but all the solutions I've seen about the "(Three) Equal-Height Columns with Sticky Footer" do not prevent the Main Content section columns from "pushing" the Footer down if there's long content in any of the content columns.

I really hope someone can help with this. Thanks in advance!

解决方案

Do you mean something like this? See fiddle: http://jsfiddle.net/NGLN/R6F5q/2/.

Tested on Win7 in IE7, IE8, IE9, Opera 11, FF 4, Chrome 12, SafariWin 5.

这篇关于CSS-三个可滚动的等高主要内容列(流体高度)和粘滞/始终可见的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！