Có cách nào để thiết lập bố cục sao cho tiêu đề là 50px, nội dung là 100% và chân trang là 50px không?cách đặt chiều cao DIV 100% giữa đầu trang và chân trang
Tôi muốn cơ thể sử dụng tối đa toàn bộ khu vực xem. Tôi muốn có chân và tiêu đề là trên màn hình bất cứ lúc nào
Tôi tạo ra một ví dụ trong jsfiddle:
CẬP NHẬT JsFiddle: http://jsfiddle.net/5V288/1025/
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>
CSS :
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
Nếu không có hộp biên giới, nội dung sẽ là hei ght 100% + 140px đệm. Với hộp viền, chiều cao nội dung sẽ là 100% và phần đệm sẽ nằm bên trong.
Sẽ rất hay khi [bao gồm một số mã ở đây] (http://stackoverflow.com/a/12907900/1269037) trong trường hợp JSFiddle không có sẵn. BTW, hộp 'kích thước hộp: border-box; 'dường như không tạo ra bất kỳ sự khác biệt nào. –
Nếu không có hộp biên giới, nội dung sẽ có chiều cao 100% + 140px đệm. Với hộp viền, chiều cao nội dung sẽ là 100% và phần đệm sẽ nằm bên trong. – WolvDev
Điều đó không hoạt động khi cuộn, chân trang cuộn với nội dung. – Roaders
Chỉ cần một bản sửa lỗi cho giải pháp Andreas Winter:
* Với các giải pháp của nó, bạn sẽ có vấn đề nếu nội dung lớn hơn diện tích cửa sổ có sẵn.
Cảm ơn điều này - Tôi đã đấu tranh với đầu trang và chân trang cố định với khu vực trung tâm có thể cuộn 100%. Điều này là hoàn hảo, bây giờ có thể có bố trí EPIC !!!^__^ – Jason
yayyyyyyy, hân hạnh được giúp bạn: 3 –
Tôi nghĩ điều bạn đang tìm kiếm là "nhiều tọa độ tuyệt đối". A List Apart có một lời giải thích here nhưng về cơ bản, bạn chỉ cần xác định vị trí của cơ thể như tuyệt đối, và đặt cả top: 50px và bottom: 50px:
<body>
<style>
#header {
position: absolute;
height: 50px;
}
#body {
position: absolute;
top: 50px;
bottom: 50px;
background-color: yellow;
}
#footer {
position:absolute;
height: 50px;
bottom: 0;
}
</style>
<div id="header">Header</div>
<div id="body">Content goes here</div>
<div id="footer">Footer</div>
http://www.spookandpuff.com/examples/absoluteCoordinates.html cho thấy kỹ thuật một cách đẹp hơn.
http://stackoverflow.com/questions/6158975/css-100-height-layout – Samich
Bạn muốn hành vi nào nếu nội dung trong cơ thể làm tràn chiều cao màn hình? – bendataclear