Как я могу сделать макет границы, используя CSS?

Question

Я хочу создать макет границы для веб-приложения, в котором есть заголовок и нижний колонтитул фиксированного размера, боковая панель и главное центральное содержимое, которое расширяется, чтобы заполнить оставшееся пространство. Думайте об этом как о вашем браузере, где панели инструментов и строка состояния имеют фиксированный размер, боковая панель может изменять размер, но веб-сайт в центре расширяется, чтобы заполнить оставшийся размер.

edit: чтобы уточнить, я хочу указать высоту всего дизайна в пикселях, например 600px. Затем я хочу, чтобы боковая панель и центральные делители расширялись вниз, чтобы заполнить доступное пространство, даже если их содержимое недостаточно велико, чтобы заполнить пространство. Аналогию с веб-браузером можно использовать и здесь. Даже если страница, которую вы просматриваете в браузере, не выше окна браузера, размер браузера не изменяется.

Есть ли способ сделать это в CSS?

Answer 1

div { border : 1px solid #d3d3e3 }

#north    { margin:0;  padding:1em;  }        
#south    { margin:0;  padding:1em;  }        
#east     { margin:0;  padding:1em;  width:6em; height:22em; float:left; margin-right:1.1em }        
#west     { margin:0;  padding:1em;  width:6em; height:22em; float:right; margin-left:1.1em }        
#center   { margin:0;  padding:1em;  padding-bottom:0em; }        
#center:after    { content:' '; clear:both; display:block; height:0; overflow:hidden }

<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>

Прямая ссылка: http://jsfiddle.net/marrok/dGw6K/2/

Answer 2

Макет таблицы CSS может с этим справиться.

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
    display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .bottom {
    display: table-row; 
}

JSFiddle

Answer 3

попробуйте flexbox, работает с firefox и webkit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

текущая реализация не обновляется, но она достаточно хороша

но вы, вероятно, можете сделать это с таблицами (которые похожи на flexbox)

надеюсь, это поможет

Answer 4

Метод, на который вы ссылаетесь, звучит как работа для колонтитула - это уже старое, но все еще работает очарование ... человек в синем - footerStickAlt

Подобный вопрос здесь.

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