Какой правильный способ достижения 3-колонной компоновки с центром жидкости - PullRequest
Новая
       10

Какой правильный способ достижения 3-колонной компоновки с центром жидкости

11 голосов
/ 26 июля 2011

Я работаю над 3-колонным макетом с двумя боковыми панелями фиксированной ширины (слева и справа) и центром жидкости.Я следовал статье Holy Grail от A List Apart , и, хотя это нормально работает в большинстве браузеров, у меня возникают некоторые проблемы в Internet Explorer 7+.

Проблема с IE 7+не проистекает из этой техники, а скорее из-за того, что страница отображается в режиме причуд.Однако, если я сделаю его рендеринг в режиме соответствия стандартам, многие устаревшие элементы сместятся и потребуют полного переписывания.

Учитывая, что эта статья датируется несколькими годами, это самая актуальнаядата ссылки на тему?Или мне следует применить другую технику?

Любая идея о том, как это сделать, будет принята с благодарностью.

Ответы [ 3 ]

20 голосов
/ 26 июля 2011

Нет смысла плавать в столбцах.

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;
}

Демо: http://jsfiddle.net/AlienWebguy/ykAPM/

4 голосов
/ 28 марта 2013

Абсолютное позиционирование работает для всей ширины страницы, но что делать, если у вас фиксированная ширина по центру. Придумал решение на основе flex-box, которое работает в IE8 +. Flexie polyfill используется для старых браузеров

См. 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;
}
0 голосов
/ 12 апреля 2013

Я считаю, что это должно быть полезно в большинстве случаев.

Пожалуйста, смотрите ссылку ниже.

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;
}
...