Разметка сайта Div с динамическими распорок

Question

Вот DIV верстка:

<div id="mainContainer"> 
    <div id="leftSpacer"></div> 
    <div id="Content"></div> 
    <div id="rightSpacer"></div> 
</div> 

То, что я пытаюсь сделать это установить MainContent 1000px шириной и переменной высоты на основе содержания. Левая и правая распорки должны изменять размеры на экране дисплея, чтобы mainContent не двигался, и веб-сайт выглядел по центру. Каков наилучший способ добиться такого динамического изменения размера? Решение семени, чтобы быть агронизирующим браузером.

Answer 1

Вы можете использовать Flexbox, как это:

html,body{ 
    margin:0; 
    padding: 0; 
    height: 100%; 
} 
#mainContainer { 
    width: 100%; 
    min-height: 100%; 
    display: -moz-box; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    -moz-box-direction: row; 
    -webkit-box-direction: row; 
    -webkit-flex-flow: row nowrap; 
    -ms-flex-flow: row nowrap; 
    flex-flow: row nowrap; 
} 
#rightSpacer, 
#leftSpacer{ 
    background: red; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -ms-flex: 1; 
    -webkit-flex: 1; 
    flex: 1; 
} 
#Content { 
    width: 1000px; 
    background: green; 
} 

, но он не поддерживает для ie9-. Pls просмотрите DEMO, если вы хотите узнать больше flexbox, нажмите кнопку here.

Answer 2

Применить ниже данный стиль к вашему HTML и убедиться, что он полностью заполняет ваше требование или нет.

#mainContainer{ 
    width:100%; 
    background:green; 
    overflow:hidden 
} 
#Content{ 
    background:gray; 
    width:1000px; 
    float:left; 
    margin:0 auto; 

} 
#leftSpacer{ 
    float:left; 
    background:red; 
} 
#rightSpacer{ 
    float:left; 
    background:red; 
}