Tôi có một bảng html, bên trong một div. Chiều cao của div được dựa trên các yếu tố khác trong div.Làm thế nào để có chiều cao của bảng html = chiều cao của div mẹ khi chiều cao của div không được đặt
Làm cách nào để có chiều cao của bảng bằng chiều cao của div gốc?
(chiều cao bảng: 100% sẽ không làm việc vì chiều cao của div không được thiết lập)
Cập nhật: tôi cần phải hỗ trợ IE6,7,8 nên khuyến nghị css nên được hiểu bởi những trình duyệt này.
Chiều cao bảng 100% phải lấp đầy bất kỳ khoảng trống nào có sẵn trong vùng chứa div gốc. Nếu bạn không thể đặt chiều cao trên phụ huynh div, hãy thử sử dụng height="100%" trên bảng thay vì CSS. Tôi biết, nó không phải là ngữ nghĩa chính xác, nhưng các bảng làm việc một chút quirky với divs đôi khi.
Tôi đã thử IE8 và FF 3.6 và nó không hoạt động –
Bạn có một docType hợp lệ trên trang của bạn phải không? –
Gần như không thể, bởi vì trình kết xuất không thể biết 100% là bao nhiêu.
Giải pháp thực sự dơ bẩn: Thêm display:table vào div và display:table-row-group vào bảng. Đừng mong đợi quá nhiều ... :)
Nó không có bất kỳ hiệu ứng nào trong IE8. Trong FF nó mở rộng một litte nhiều hơn nhưng nó đã không mất chiều cao đầy đủ. –
Cố gắng sử dụng position:relative và min-height:100%;
Mb thậm chí posinion:absolute, top:xxx, bottom:xxx, right:xxx và left:xxx - positing và height:auto.
Để đạt được những gì bạn đang nói về chỉ với css có thể khá khó khăn. Bạn có thể thử sử dụng javascript, jQuery hoặc bất kỳ máy chủ nào của các thư viện javascript khác để lấy chiều cao của div cha và sau đó áp dụng điều đó làm chiều cao cho bảng. Hãy xem ví dụ bên dưới. Không có vấn đề bao nhiêu văn bản được thêm vào nó thiết lập chiều cao của bảng tự động dựa trên div cha. Nó không phải là không phô trương javascript - nhưng điều này sẽ giúp bạn bắt đầu.
<html>
<head>
<title>Table Height set via jQuery</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var divHeight = $('div.full').height();
$('table.column_2').css("height", divHeight + "px");
$('table.column_2 .parentDiv').text(divHeight);
var tableHeight = $('table.column_2').height();
$('table.column_2 .tableHeight').text(tableHeight);
});
</script>
<style type="text/css" media="screen">
div.full {
width:960px;
float:left;
}
div.column_1 {
width:450px;
padding:0 10px;
float:left;
margin-right:10px;
background-color:#eee;
}
table.column_2 {
width:470px;
float:left;
background-color:#ddd;
}
</style>
</head>
<body>
<div class="full">
<div class="column_1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
</div>
<table class="column_2">
<thead>
<tr>
<th>Table Height</th>
<th>Parent Div Height</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableHeight"></td>
<td class="parentDiv"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tin xấu, bạn không thể. Có rất nhiều hack cho họ và không ai trong số họ là giải pháp tốt. Javascript như được mô tả là cách duy nhất để làm điều đó nhưng phải mất quá nhiều băng thông trên những điều nhỏ nhưng hữu ích nếu bạn định sử dụng jQuery cho các chức năng khác.
CSS 3 có các quy tắc mới cho phép bạn có tính linh hoạt đó nhưng nhiều trình duyệt không cung cấp hỗ trợ CSS 3 đầy đủ. Vì bạn muốn IE6/7, bạn sẽ không may mắn.
Nếu thật sự quan trọng, bạn có thể sử dụng các bảng tối thiểu. Đừng để người khác nói với bạn rằng nó sai khi nó hoạt động cho hầu như tất cả các trình duyệt máy tính để bàn và thậm chí cả các trình duyệt di động hoạt động tốt miễn là chúng không được lồng nhau không quá hai cấp độ sâu.
Một giải pháp khác là tạo thiết kế bố cục không phụ thuộc vào việc kiểm tra chiều cao của DIV khác.
Tại sao không thể có chiều cao trên div gốc? – quoo
Vì tôi không muốn hạn chế chiều cao nếu ai đó định lại kích thước phông chữ hoặc nếu có nhiều nội dung hơn. Chiều cao nên điều chỉnh để vừa với nội dung. –