Giả sử có 6 div ở mặt còn lại.Tự động điều chỉnh chiều cao div bằng CSS
div thứ nhất, thứ 2 và thứ 3 có chiều cao cố định, ví dụ: 25px, 100px và 25px. Div thứ tư là khu vực nội dung và phải là div điều chỉnh tự động. div thứ 5 có một số nội dung và chiều cao tối thiểu là 100px (chiều cao KHÔNG cố định). Div thứ 6 là chân trang có chiều cao cố định, ví dụ: 25px.
divs thứ 5 và thứ 6 nên luôn trên dưới cùng của trang (KHÔNG dính)
Không có vấn đề khi lần thứ 4 div (div_auto_height) có rất nhiều nội dung và trang web chỉ là miễn hoặc lâu hơn hơn màn hình.
Sự cố xảy ra khi trang ngắn hơn màn hình và không gian trống xuất hiện sau div thứ 6. Sau đó, div thứ 5 và thứ 6 không phải là nơi mà chúng được mong đợi.
Vấn đề sẽ được giải quyết nếu người ta có thể có được chiều cao của div 4 (div_auto_height) tự động điều chỉnh để lấp đầy khoảng trống.
Tôi đã cố gắng để giải quyết vấn đề này bằng nhiều cách mà không có một giải pháp phù hợp.
giải pháp Không làm việc:
- Có độ phân giải màn hình khác nhau, vì vậy min-height không hoạt động với màn hình lớn mà không làm trang rất lâu cho màn hình rộng nhỏ hoặc .
- tôi đã không thể có được tài sản định vị trên và dưới hoạt động đúng vì nó làm cho các div 5 và 6 tới trên 4 div (div_auto_height)
Đây là một khuôn mẫu để sửa đổi của bạn:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>No title</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#div1 {
height: 25px;
background-color: #123456;
}
#div2 {
height: 100px;
background-color: #345678;
}
#div3 {
height: 25px;
background-color: #567890;
}
#div_auto_height {
height: auto ;
background-color: #789012;
}
#div5 {
min-height: 100px;
background-color: #9;
}
#div6 {
height: 25px;
background-color: #123456;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div_auto_height">This div should adjust automatically</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
</body>
</html>
</body>
</html>
** Trích **: _ "... sáu divs một mặt khác" _. Điều đó có nghĩa là gì? Có lẽ bạn có thể cung cấp một hình ảnh về những gì bạn đang muốn làm. – Sparky
Tại sao bạn không thể đưa chiều cao mi cho 'div_auto_height'? Tôi thấy câu hỏi của bạn không đủ rõ ràng. – Sandeep
Tôi đang hướng đến giải quyết vấn đề với các bảng, vì vậy nó sẽ phổ biến nhất có thể ... – Johnny