问题
I wrote a website a while ago that is a little messy in how it does things. I used this CSS template and this equal height columns trick. I have not one but two container divs and I can't remember what they're doing. This seems unsatisfactory. So I'm thinking of restructuring the thing from scratch, and possibly making use of the more "semantic" html5 tags like <nav> and so on. I'm wondering if there are CSS3 type things I can do today that will improve the code.
The question is: is there a better way to achieve a site structure with these properties:
- 2 equal height columns: one navigational sidebar, one main content column (with widths as percentages of the available real estate, not explicitly stated)
- both a header and footer element that stretch the whole width of the total of the two main columns
- That allows the use of semantic html5 tags instead of several meaningless container divs
回答1:
In css3 there are display properties that allow your divs to behave like html tables. I.E:
#wrapper {
display: table;
}
#wrapper div {
display: table-cell;
}
Even though at first sight it seems a regression to the old table days, in practice it's tremendously useful and the code ends very readable.
Here is a jsfiddle example with the kind of the kind of layout you're describing: http://jsfiddle.net/duopixel/SKxCH/
回答2:
In fact, CSS3 has a multi-column feature which allows you to divide an element into equal columns. Quirksmode.org has a good write up on it: http://www.quirksmode.org/css/multicolumn.html
Give it a go; if you could get it working, I think it'd answer all your requirements. However, it doesn't work in IE, and even other browsers only implemented it recently. Judge for yourself, but my feeling is it might be a while yet before it has enough browser support to be worth using.
来源：https://stackoverflow.com/questions/4874847/does-css3-offer-a-better-way-to-have-a-two-column-website-with-header-and-footer