Tại sao trình bao bọc số 4 không kế thừa chiều cao của vùng chứa bảng cha của nó? Bảng được lồng trong một trình bao bọc khối hiển thị, mỗi div lồng nhau là bảng hiển thị và mỗi bảng kế thừa từ bảng trong cùng. Nguyên nhân gây ra nó và làm cách nào để khắc phục nó?
jsfiddle:http://jsfiddle.net/ubjZT/14/ (Đã chỉnh sửa có lỗi đánh máy trong jsfiddle cũ)
thẻ html:
CSS:
.wrapper
{
display: block;
nền: đen;
chiều cao:100%;
width: 100%;
}
body
{
chiều cao: 500px;
}
.lastunit
{
chiều cao: 100%;
width: 100%;
nền: màu vàng;
display: table;
}
.wrapper2
{
position: relative;
phần đệm trên cùng: 58,95117540687161%;
phần đệm dưới cùng: 0;
phần đệm bên trái: 0;
đệm-phải: 0;
width: 100%;
chiều cao: 100%;
display: table;
background: red;
}
.wrapper3
{
position: absolute;
left: 0;
phải: 0;
top: 0;
đáy: 0;
display: table;
nền: màu xanh lá cây;
chiều cao: 100%;
width: 100%;
}
.wrapper4
{
chiều rộng: 39,24050632911392%;
lề trái: 5,4249547920434%;
lề phải: 5,4249547920434%;
lề trên: 6,69077757685353%;
chiều cao: 88,650306748466%;
display: table;
nền: màu tím;
}
Câu trả lời được cập nhật FIDDLE:http://jsfiddle.net/ubjZT/20/
Không cần phải đặt trình bao bọc thànhdisplay: table
. Chỉ cần đặt chúng thành hiển thị: khối
(Trên thực tế, bạn hoàn toàn không thể đặt nó trưng bày
thuộc tính vì div
Mặc định là hiển thị: khối
)
Về css - bảng lồng nhau trong bảng trong bảng trong bảng trong bảng trong khối hiển thị div không kế thừa chiều cao, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/16862554/
Tôi là một lập trình viên xuất sắc, rất giỏi!