1. Giải pháp thông thường nhất cho vấn đề này là sử dụng Flexbox. Hãy xem cách sử dụng nó. Đối với phương pháp này, chúng ta sẽ cần thuộc tính CSS flex làm cách viết tắt cho các thuộc tính flex-grow, flex-shrink và flex-basis
- Sử dụng một
và thêm ba khác
yếu tố bên trong
- Thêm thuộc tính lớp vào
yếu tố
- cộng
các phần tử bên trong
nhãn
header [sized to content]
content [fills remaining space]
footer [fixed height]
- Đặt chiều cao và lề cho các phần tử và
- Đặt màn hình thành "flex" và thêm các thuộc tính flex-flow và height cho lớp "hộp"
- Đặt đường viền cho “hộp. hàng ngang"
- Đặt thuộc tính flex cho các lớp “tiêu đề hàng”, “nội dung hàng” và “chân hàng” một cách riêng biệt
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted #0313fc;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
Hãy xem mã cuối cùng
Ví dụ về làm một
lấp đầy khoảng trống còn lại bằng Flexbox
Title of the document
header [sized to content]
content [fills remaining space]
footer [fixed height]
Sử dụng flexbox, bạn có thể chuyển đổi giữa các hàng và cột có kích thước cố định, kích thước theo kích thước nội dung hoặc kích thước không gian còn lại. Trong ví dụ trên, chúng tôi đã trình bày cách thêm một khu vực có chiều cao cố định và đặt khu vực nội dung để lấp đầy không gian còn lại
Hãy mở rộng ví dụ của chúng ta và thêm div vùng chứa sau div hộp
/* add this line */
header [sized to content]
content [fills remaining space]
footer [fixed height]
/* end of box-container div */
Và đây là kết quả của chúng ta
Như chúng ta thấy, bố cục của chúng ta bị hỏng
Giải pháp khá đơn giản. Chúng ta nên thay đổi hành vi mặc định của thẻ div, đó là đặt màn hình thành phần tử cấp khối. Chúng tôi sẽ sử dụng màn hình. nội dung, vì vậy nội dung sẽ xác định kích thước của phần tử
.box-container {
display: contents;
}
Hãy tiến thêm một bước bằng cách thêm một hình ảnh vào hộp chứa của chúng tôi và xem điều gì sẽ xảy ra
Đây là kết quả của chúng tôi
Có vẻ như nó vẫn hoạt động, tuyệt vời. Vì vậy, tất cả những gì chúng tôi phải làm là đặt màn hình. nội dung vào div box-container của chúng tôi
2. Một cách khác để thực hiện một
lấp đầy khoảng trống còn lại là sử dụng thuộc tính vị trí CSS. Chỉ cần đặt vị trí thành "tuyệt đối" để kéo dài
.
Ví dụ về làm một
lấp đầy khoảng trống còn lại với thuộc tính vị trí
Title of the document
Fixed height
Remaining height
3. Phương pháp tiếp theo để tạo ra một
lấp đầy khoảng trống còn lại bằng cách sử dụng các bảng. Bằng cách đặt thuộc tính hiển thị thành “bảng”, chúng ta có thể phân phối không gian đã cho. Khi chúng ta đặt chiều cao cố định cho một phần tử, phần tử kia sẽ sử dụng khoảng trống còn lại
Phương pháp này có thể gây ra một số vấn đề với bố cục
Title of the document
Fixed height
Remaining height
Ví dụ về làm một
lấp đầy khoảng trống còn lại với màn hình được đặt thành "bảng"
Title of the document
Fixed height
Remaining height
4. Phương pháp cuối cùng là sử dụng hàm CSS calc[]. Bằng cách này, chúng ta có thể gán chiều cao được tính từ tổng chiều cao trừ đi chiều cao của phần tử khác
Tôi có một phần tử DIV cần lấp đầy toàn bộ màn hình cho đến khi người dùng cuộn và hiển thị nội dung. Vì vậy, về cơ bản vẫn ở độ cao của khung nhìn
Đây là những gì tôi đã làm và nó hoạt động, nhưng nó chỉ tương thích với các trình duyệt mới hơn
`. toàn phần {
chiều cao. 100vh;
chiều cao tối thiểu. 100vh;
}`
Có cách nào để làm điều này có khả năng tương thích hơn một chút không?
Tôi đã thử phương pháp tuyệt đối với chiều cao và chiều rộng được đặt thành 100%, tuy nhiên, nội dung bên dưới sau đó chồng lên nhau
Bất kỳ trợ giúp sẽ được đánh giá cao
Tháng Một 24, 2014 lúc 10. 17 giờ sáng
Paulie_D
Hội viên
Tôi có cần Javascript không?
Có thể
Tháng Một 24, 2014 lúc 10. 25 giờ sáng
jor133d
người tham gia
Tôi có nên bắt đầu một cuộc thảo luận mới trong phần javascript hay mọi người có thể cung cấp một số hỗ trợ tại đây không?
Tháng Một 24, 2014 lúc 5. 18 giờ chiều
Alen
người tham gia
Một cái gì đó như thế này
http. // codepen. io/anon/bút/wjpKn
Tháng Một 25, 2014 lúc 8. 01 giờ sáng
Paulob
người tham gia
Tôi có thể thiếu điểm một chút nhưng bạn chỉ cần đặt html,body thành chiều cao. 100% và sau đó bạn có thể đặt div của mình thành chiều cao. 100%
Hoặc nếu không có nội dung trong div này thì hãy sử dụng phần tử giả trên phần thân để tạo chiều cao [IE8+ + tất cả các nội dung khác]