问题
I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart's Holy Grail article, and, although this works fine in most browsers, I am having some problems in Internet Explorer 7+.
The problem with IE 7+ actually doesn't stem from this technique, but rather from the fact that the page is rendering in quirks mode. If I make it render in standards-compliance mode, however, many outdated elements become displaced and would require a complete re-writing.
Given that this article dates a few years, is this the most up-to-date reference on the subject? Or should I be applying a different technique?
Any insight on the best way to do this will be greatly appreciated.
回答1:
There's really no point in floating the columns.
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"> Center content</div>
<div id="right"></div>
</div>
CSS:
#left {
position:absolute;
left:0;
width:50px;
height:100%;
background-color:pink;
}
#center {
height:100%;
margin: 0 50px;
background-color:green;
}
#right {
position:absolute;
right:0;
top:0;
width:50px;
height:100%;
background-color:red;
}
body, html, #wrapper {
width:100%;
height:100%;
padding:0;
margin:0;
}
Demo: http://jsfiddle.net/AlienWebguy/ykAPM/
回答2:
The absolute positioning works for a full width page but what about when you have a fixed width that is centered. Came up with a solution based on flex-box that works in IE8+. The flexie polyfill is used for older browsers
See http://jsfiddle.net/lorantd/9GFwT/10/
<div id="header"></div>
<div id="main">
<div id="menu"></div>
<div id="content"></div>
<div id="summary"></div>
</div>
<div id="footer"></div>
#header {
background-color: #9B9EA7;
height: 70px;
}
body {
min-width: 500px;
max-width: 630px;
margin-right: auto;
margin-left: auto;
display: block;
}
#main {
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
display:-webkit-box; /* Safari and Chrome */
display:box;
width: 100%;
}
#menu {
background-color: #D42108;
width: 120px;
margin-top: 10px;
margin-right: 10px;
}
#content {
background-color: #FFD700;
height: 500px;
margin-top: 10px;
margin-right: 10px;
-webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 2; /* OLD - Firefox 19- */
width: 60%; /* For old syntax, otherwise collapses. */
-webkit-flex: 2; /* Chrome */
-ms-flex: 2; /* IE 10 */
flex: 2;
}
#summary {
width: 30px;
margin-top: 10px;
background-color: #9B9EA7;
}
#footer {
background-color: #353535;
width: 100%;
height: 50px;
margin-top: 10px;
clear: both;
}
回答3:
I believe this should be useful in most cases.
Please see link below.
http://jsfiddle.net/ykAPM/278/
#left {
position:fixed;
left:0;
width:50px;
height:100%;
background-color:pink;
}
#center {
margin: 0 50px;
background-color:green;
overflow:auto
}
#right {
position:fixed;
right:0;
top:0;
width:50px;
height:100%;
background-color:red;
}
body, html, #wrapper {
width:100%;
height:100%;
padding:0;
margin:0;
}
#test{
height:1000px;
}
来源:https://stackoverflow.com/questions/6824789/whats-the-proper-way-to-achieve-3-column-layout-with-fluid-center