Nội dung với 100% giữa đầu trang và chân trang

Question

Giả sử tôi có bố cục sau (xem hình bên dưới) ... Tôi có đầu trang (A) ở trên cùng, chân trang (C) luôn ở dưới cùng và vùng chứa (B) đó là ở giữa và nên điền vào không gian còn lại giữa tiêu đề và chân trang bằng 100%.

không thể nghĩ ra cách nào làm thế nào để đạt được sử dụng css tinh khiết này. Có những câu chuyện mới trên trang chủ!

Answer 1

Tùy thuộc vào cách trang của bạn được thiết lập, nó có thể hoạt động nếu bạn đặt height: 100%; cho (B) và position: absolute; cho phần tử vùng chứa. Dưới đây là một ví dụ:

HTML:

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>​ 

CSS:

#container { 
    height: 100%; 
    width: 100%; 
    background: green; 
    position: absolute; 
} 
#header, #footer { 
    height: 100px; 
    width: 100%; 
    background: red; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
}​ 

jsFiddle

Answer 2

Câu hỏi của bạn khá nhiều mô tả các yếu tố khối cấp cách tiêu chuẩn, chẳng hạn như DIV, hành xử. Div trung tâm sẽ luôn chiếm 100% không gian giữa hai, và nó sẽ phát triển dựa trên nội dung bên trong của nó.

Điều đó nói rằng, tôi sẽ giả sử bạn muốn một chân trang FIXED - một phần nằm ở cuối cửa sổ trình duyệt. Đây là achiavable sử dụng một số kỹ thuật, một trong số đó là sử dụng absolutly vị:

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

Kiểu:

#header, #footer, #content { position: absolute; left: 0; width: 100%; } 
#header, #footer { overflow: hidden; background: #444; height: 100px; } 
#header { top: 0; } 
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; } 
#footer { bottom: 0; }​ 

http://jsfiddle.net/U9wfy/

Answer 3

Tôi đã xem qua câu hỏi này và nghĩ rằng một nhiều hơn "hiện đại" câu trả lời sẽ hữu ích. Bố cục này được dễ dàng sử dụng flexbox ..

https://www.codeply.com/go/1QgRb4uFmj

<header> 
</header> 
<main></main> 
<footer> 
</footer> 

html, body { 
    margin: 0; 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

header, 
footer { 
    flex: none; 
    background: #ddd; 
} 

main { 
    overflow-y: scroll; 
    flex: auto; 
}