如何有固定的左/右，流体中间和固定页脚的3列布局？ [英] How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?

问题描述

我如何能有一个类似这样的布局？

我已经看到了一些不太适合我的解决方案。例子和意见我已经看到建议这是不可能的。 （图表中缺少溢出自动）。

什么是值得的：这里是我现在的小提琴（我决定试用一个表，hrmmmm）。

它使用一点黑客来获取页脚在屏幕上显示在较低的视口高度：

  body {
 border-bottom：100px solid; / *页脚高度* / 
 box-sizing：border-box; 
} 
  

border-box属性解释如下： http://www.paulirish.com/2012/box-sizing-border-box-ftw /
基本上，它做的是，它使元素包含边框和paddings里面。所以，给这里的身体的底部边框将保留在视口内，而不是sans-border-box。
这使得它类似于页脚可以容纳的负空间。我使用'border'，因为你可能想修改填充。

对于页脚，它是固定的位置，所以它是相对于视口，而不是你会得到的布局绝对定位。因此，它位于身体的底部边界的顶部（其共享其高度值）。

中心块是流体，因为我给它'overflow：hidden'属性，可清除浮动广告（ http：// www。 stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ ）。它也会工作没有溢出，但它可以导致问题。
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $中心列，并给它overflow：auto。

How can i have a layout similar to this?

I have seen a few solutions that are not quite right for me. Examples and comments I have seen suggest this is not possible. (Diagram is missing overflow auto in the middle).

For what it is worth: here is my current fiddle (where I decided to trial a table, hrmmmm).

http://jsfiddle.net/valamas/m8R43/6/

Additional: Printscreen as mentioned in comments. Occurs when dragging/selecting down the page after adding a header. See: http://dabblet.com/gist/3753308

解决方案

If you're not too concerned about source order: http://dabblet.com/gist/3748868

It uses a bit of a hack to get the footer to display on screen on lower viewport heights:

body {
    border-bottom: 100px solid; /* height of footer */
    box-sizing: border-box;
    }

The 'border-box' property is explained here: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Basically, what it does is, it makes elements contain borders and paddings inside them. So, the bottom border given to the body here will stay inside the viewport, as opposed to sans-border-box.
This makes it kind of like a negative space which can be accommodated by the footer. I used 'border' because you may want to tinker with the padding.
As for the footer, it's fixed positioned, so it's relative to the viewport, not the layout which is what you'd get with absolute positioning. Hence it lying on top of the bottom border of the body (which shares its height value).

The center block is fluid because I gave it the 'overflow: hidden' property, which clears floats( http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ ). It will also work without overflow, but it can cause issues.
Since you want to be able to scroll when the content inside the columns are larger than the content height, I've added a container inside the center column, and gave it overflow: auto.

这篇关于如何有固定的左/右，流体中间和固定页脚的3列布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！