Как создать границу с помощью css?

Question

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

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

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

Answer 1

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

Similar question here.

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

Answer 2

попытка Flexbox, работает с Firefox и WebKit

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

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

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

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

Answer 3

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 4

Схема таблицы 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