Mam tabelę html wewnątrz div. Wysokość div jest oparta na innych elementach div.Jak uzyskać wysokość tabeli html = wysokość div elementu nadrzędnego, gdy wysokość div nie jest ustawiona
W jaki sposób wysokość stołu może być równa wysokości jego dzioba?
(wysokość stołu: 100% nie będzie działać, ponieważ wysokość div nie jest ustawiony)
Aktualizacja: muszę wspierać IE6,7,8 więc zalecenia css powinny być rozumiane przez tych przeglądarek.
Wysokość stołu w 100% powinna zostać wypełniona niezależnie od dostępnego miejsca w kontenerze nadrzędnym. Jeśli nie możesz ustawić wysokości na rodzicu div, spróbuj użyć height="100%" w tabeli zamiast CSS. Wiem, to nie jest semantycznie poprawne, ale tabele działają czasami dziwacznie z divami.
Próbowałem IE8 i FF 3.6 i nie działało –
Masz prawidłowy docType na swojej stronie, prawda? –
Prawie niemożliwe, ponieważ renderer nie wie, ile powinno być 100%.
Naprawdę brudne obejście: Dodaj display:table do div i display:table-row-group do tabeli. Nie oczekuj zbyt wiele ... :)
Nie miało żadnego efektu w IE8. W FF powiększyło nieco więcej, ale nie osiągnęło pełnej wysokości. –
spróbuje użyć position:relative i min-height:100%;
Mb nawet posinion:absolute, top:xxx, bottom:xxx, right:xxx i left:xxx - positing i height:auto.
Osiągnięcie tego, o czym mówisz, po prostu za pomocą CSS może być dość trudne. Możesz spróbować użyć javascript, jQuery lub dowolnej innej biblioteki javascript, aby pobrać wysokość div jednostki nadrzędnej, a następnie zastosować ją jako wysokość do tabeli. Sprawdź poniższy przykład. Bez względu na ilość dodawanego tekstu ustawia dynamicznie wysokość tabeli na podstawie elementu div. To nie jest dyskretny javascript - ale powinno ci to zacząć.
<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>
Złe wieści, nie możesz. Jest ich tyle, a żaden z nich nie jest dobrym rozwiązaniem. JavaScript zgodnie z opisem jest jedynym sposobem, aby to zrobić, ale zajmuje zbyt dużo przepustowości na małe rzeczy, ale przydatne, jeśli planujesz użyć jQuery do innych funkcji.
CSS 3 ma nowe zasady, które pozwalają na taką elastyczność, ale wiele przeglądarek nie oferuje pełnej obsługi CSS 3. Ponieważ chciałeś IE6/7, nie masz szczęścia.
Jeśli to NAPRAWDĘ ważne, wystarczy użyć minimalnych tabel. Nie pozwól, aby inni mówili Ci, że jest źle, gdy działa dla praktycznie wszystkich przeglądarek komputerowych, a nawet przeglądarki mobilne działają dobrze, o ile nie są zagnieżdżone nie głębiej niż dwa poziomy.
Innym rozwiązaniem jest tworzenie projektów układów, które nie zależą od sprawdzenia innych wysokości DIV.
Dlaczego nie może być wysokość na div jednostki? – quoo
Ponieważ nie chcę ograniczać wysokości, jeśli ktoś zmienia rozmiar czcionki lub jest więcej treści. Wysokość powinna dopasować się do zawartości. –