CSS Layout instance: Upper Three rows, middle adaptive

CSS Layout instance: Upper and lower three lines of layout, up and down high, the middle bar adaptive browser height, and content vertically centered. This code is passed in Firefox 2.0/win ie 6/win ie 7/opera 8.5 cn/win safari test. For non-IE kernel browsers, display:table, Display:table-row, and Display:table-cell are used to simulate the form's representation.

Outermost #box {display:table}, height 100%, its child layer #header/#main/#footer为 {display:table-row}, so you can simulate the row effect of the table, up and down high, then the middle of the high level of adaptive height.

#wrap层为 {Display:table-cell;} Simulates a cell, so you can set {Vertical-align:middle;}, centered vertically.

Because win IE does not support {display:table}, it can only be implemented in a positioning manner. Inside is the setting for IE.

The following is a reference fragment: the next three lines of layout, up and down high, the middle bar adaptive browser height, and the content vertically centered www.cxybl.com header content content content content content content content content content content content content content content footer