Làm cách nào để tạo bố cục biên giới bằng css?

Question

Tôi muốn tạo bố cục đường viền cho webapp, trong đó có đầu trang và chân trang có kích thước cố định, thanh bên và nội dung chính ở giữa mở rộng để lấp đầy khoảng trống còn lại. Hãy nghĩ về nó như trình duyệt của bạn, nơi các thanh công cụ và thanh trạng thái có kích thước cố định, thanh bên có thể thay đổi kích thước, nhưng trang web ở trung tâm mở rộng để lấp đầy kích thước còn lại.

chỉnh sửa: Để làm rõ, tôi muốn chỉ định chiều cao của toàn bộ thiết kế tính bằng pixel, ví dụ: 600px. Sau đó, tôi muốn thanh bên và các div trung tâm mở rộng xuống để lấp đầy không gian sẵn có, ngay cả khi nội dung của chúng không đủ lớn để lấp đầy không gian. Tương tự webbrowser cũng có thể được sử dụng ở đây. Ngay cả khi trang bạn đang xem trong trình duyệt không cao hơn cửa sổ trình duyệt, trình duyệt không đổi kích thước.

Có cách nào để thực hiện việc này trong css không?

Answer 1

Phương pháp bạn đề cập đến âm thanh như một công việc cho chân thanh - điều này là cũ đã có, nhưng việc một nét duyên dáng vẫn ... the man in blue - footerStickAlt

Similar question here.

Và tôi chắc chắn rằng nếu bạn sử dụng cùng một tiêu chí trong câu hỏi đó và câu hỏi được liên kết trong đó để thực hiện tìm kiếm, bạn sẽ tìm hiểu thêm.

Answer 2

thử flexbox, làm việc với firefox và webkit

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

việc thực hiện hiện tại không được cập nhật, nhưng nó là đủ tốt

nhưng có thể bạn có thể làm điều này với các bảng (tương tự như the flexbox)

hy vọng điều này sẽ giúp

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> 

Liên kết trực tiếp: http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

Bố cục bảng CSS có thể xử lý điều này một cách độc đáo.

.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