使用HTML和CSS＆JS创建流畅全屏布局的最佳技术？

Question

What would be the best way to create fluid layout, which would fill the screen in both, horizontally and vertically ? (The layout should be 100% height of the window, so no scrollbars should be visible nor no scrolling required)

I'm thinking purely as techniques go, since the elements of the layout will be changing.

Example could be something like this:

---------------------------------------
| HEADER  100% x 100px                |
---------------------------------------
|         |                 |         |
| SIDEBAR |      FILL       | SIDEBAR |
| 200px   |                 | 30%     |
| x 100%  |                 | x 100%  |
|         |                 |         |
|         |                 |         |
---------------------------------------

1. Header, that spans the whole screen,
2. Sidebars, that are floated to the edges, and which span the rest of the available height
3. And fill element, that fills the rest in horizontally and vertically

Currently it looks like this can only be achieved with JavaScript manipulation on window resize (as far as the height and fill goes).

But what if we add/remove elements , like add bar on top of the header, or take another sidebar away? The whole layout should still be filling the screen without any code or style changes. I'm somewhat stumped on how to approach this whole thing.

Penny for your thoughts Internet?

Answer 1

You don't have to have JavaScript - you can do it using HTML + CSS...

There are lots of three-column solutions here:

http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Edit: Height Issue

If you just want fluid with entire height, here is a solution I've mocked up on JSFiddle...

http://jsfiddle.net/Sohnee/qJjyc/

Update:

Here is an example with a header, to demonstrate how you take it into account...

http://jsfiddle.net/qJjyc/1/

Answer 2

If you are not targeting Internet Explorer, you can position:absolute , box-sizing:border-box , and a lot of top , right , bottom , left , width , and height to create nice full screen layouts, and you have a lot of control over where elements are placed related to its container.

With border-box sizing, you don't have to worry that border and padding will expand the box.

See this for an example: http://jsfiddle.net/thai/jtYDP/2/

It works in Firefox and Chrome.

Answer 3

I've modified Thai's jsfiddle to include a footer and I removed the right sidebar, I've set a min height and a min width to the main container and used more div to be able to manipulate paddings without breaking the page. I also added some jQuery to hide and show the sidebar. It works pretty well.

I had to make a web app so I used that layout.

http://jsfiddle.net/gableroux/jtYDP/35/

Hiding and showing sidebar change the size of content dynamically (using margins) so it may help some of you :). Now my app feels really good.

I hope it helps.

Answer 4

My favorite way to do it is this one . No JavaScript needed.

Answer 5

I just kind of rolled my own , not exactly there but I'd use it :D

Only thing is making the columns 100% high...

Answer 6

也许YAML可以为你提供帮助。