Jak utworzyć układ obramowania za pomocą css?

Question

Chcę utworzyć układ obramowania dla aplikacji internetowej, w której znajduje się nagłówek i stopka o stałym rozmiarze, pasek boczny i główna treść centrum, która rozwija się, aby wypełnić pozostałe miejsce. Pomyśl o tym jak o przeglądarce, w której paski narzędzi i pasek stanu mają stały rozmiar, pasek boczny może zmienić rozmiar, ale witryna w środku rozszerza się, aby wypełnić pozostały rozmiar.

edytuj: Aby wyjaśnić, chcę określić wysokość całego projektu w pikselach, na przykład 600 pikseli. Następnie chcę, aby pasek boczny i środek divy rozszerzyły się, aby wypełnić dostępną przestrzeń, nawet jeśli ich zawartość nie jest wystarczająco duża, aby wypełnić przestrzeń. W tym miejscu można również zastosować analogię do przeglądarki internetowej. Nawet jeśli strona, którą przeglądasz w przeglądarce, nie jest wyższa niż okno przeglądarki, przeglądarka nie zmienia rozmiaru.

Czy jest jakiś sposób to zrobić w css?

Answer 1

Sposób odnieść się do dźwięków jak zadanie dla stopki kija - to jest już stary, ale wciąż działa urok ... the man in blue - footerStickAlt

Similar question here.

I jestem pewien, czy używasz tego samego Kryteria w tym pytaniu i pytanie związane z tym, aby przeprowadzić wyszukiwanie, będziesz wymyślić coś więcej.

Answer 2

try schematu flexbox, współpracuje z Firefox i WebKit

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

obecna implementacja nie jest aktualizowany, ale jest wystarczająco dobre

ale prawdopodobnie można zrobić to z tabel (które są podobne do schematu flexbox)

nadzieję, że to pomaga

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> 

Link aktywny: http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

Układ tabeli CSS poradzi sobie z tym ładnie.

.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