Wie man div-match die Höhe der mit td?
Habe ich drei "panels", legte Sie sich entlang der Zeile einer Tabelle. Eine ist, größer als die anderen beiden und ich möchte alle drei Bereiche entsprechend der Höhe der höchsten. Ich versuchte styling die divs mit height: 100%, aber die die kurzen Platten bleiben kurz, wie auch der mit tds wachsen.
Mein HTML generiert wird, JSF, also ich haben nur begrenzte Kontrolle über seine form, aber ich kann ändern Sie die Stile. Ich machte eine vereinfachte version der generierte code unten. Das gleiche problem tritt bei IE8 und Firefox. Jedoch, IE8 rendert die kurzen Platten, die vertikal ausgerichtet, um die Oberseite des td, während Firefox rendert Sie in der Mitte.
<html>
<head>
<title>Test Table</title>
<style TYPE="text/css">
td {border: 1px solid red; padding: 1px;}
.panel {border: 1px solid blue; padding: 1px;height:100%}
.panel-header{background-color: green; color: white;}
.panel-body {border: 1px solid green; padding: 1px; height:100%;}
</style>
</head>
<body>
<h1>Test Table</h1>
<table width="100%">
<tbody>
<tr>
<td>
<div class="panel" style="height:200px;">
<div class="panel-header">
Header One
</div>
<div class="panel-body">
Body One
</div>
</div>
</td>
<td>
<div class="panel" style="height:100%;">
<div class="panel-header">
Header Two
</div>
<div class="panel-body">
Body Two
</div>
</div>
</td>
<td>
<div class="panel">
<div class="panel-header">
Header Three
</div>
<div class="panel-body">
Body Three
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
<html>Sie können es mit einer absoluten Positionierung, werfen Sie einen Blick auf Antwort.
Es ist fünf Jahre später, so kann ich nicht testen gegen die eigentliche Seite war ich dann schaffen, sondern nur versuchen aus der Fiddle von Ihr, tut mir Leid, aber es funktioniert überhaupt nicht. Sie können missverstanden haben das problem, das ich konfrontiert war. In jedem Fall wird der jQuery-Lösung, Richard vorgeschlagen hat einfach geklappt.
InformationsquelleAutor Greg Charles | 2011-02-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube nicht, dass Sie können die Höhe auf 100%, ohne explizit eine Höhe für die tds (oder die Tabelle). Es scheint, dass Sie geben eine explizite Höhe auf ein übergeordnetes element, bevor
height:100%wirksam werden. Vielleicht können Sie ändern Ihre Stile auf die td-tags, die sich anstelle der div-Container?Wenn es hilft, die Lage zu richten die divs nach oben statt in der Mitte, habe ich ein Beispiel hier, wie es zu tun (add
vertical-align:top;zu den td-tags). Ich habe ein Beispiel mit nur divs zu, obwohl ich weiß, Sie sagten, Sie haben nur begrenzte Kontrolle über seine form.Wenn Sie die maximale Höhe eines Elements festlegen der Tabelle und Zellen zu, die Höhe (dh.
height:200px;) sollte das zu 100% berücksichtigen, der Einfluss auf die divs.Bearbeiten, Wenn Sie nicht nachteilig auf die Verwendung von jQuery, ich habe aktualisiert mein Beispiel hier zu tun, was Sie verlangen.
Ja, das lassen ganzen Tisch wachsen sollte funktionieren mehr oder weniger, wenn die Tabelle nur eine einzige Zeile. Aber, meine Reale Tabelle hat mehrere Zeilen. Es ist eine Schande, dass die td-Elemente kennen, wie man die Größe selbst, kann aber nicht passieren, dass die Informationen nach unten, um die divs, die Sie enthalten. Ich werde ein Skript, das tun können Sie die Größe und fügen Sie es an die Platten der onresize-Ereignis. Wenn ich es bekommen kann, zu arbeiten, werde ich es hier posten. (Großes wenn!)
Charles: Wenn Sie nicht nachteilig auf die Verwendung von jQuery, ich habe ein Beispiel, was Sie wollen zu meinem post.
Nein, ich bin definitiv nicht abgeneigt zu jQuery. Es ist ein Geschenk des Himmels! Vielen Dank für die Zusammenstellung, das Skript für mich. Ich benötige eine Möglichkeit, es zu begrenzen, nur die Panel-Reihe der ich interessiert bin, aber ich sollte in der Lage sein, um Sie zu verwalten. Vielen Dank für Ihre Hilfe!
Charles: Froh, dass ich helfen konnte. Sie brauchen nur zu ändern, der Selektor um eine ID für den container, den Sie wollen. Siehe hier
InformationsquelleAutor Richard Marskell - Drackir
Einer von diesen sollte den trick tun 🙂
height:100%und sagt: "ich habe versucht, die Gestaltung des divs mit height: 100%, aber die die kurzen Platten bleiben kurz, wie auch der mit tds wachsen." Auch, wenn es sich wohl um CSS, müssten Sie verwenden einen Doppelpunkt statt des Gleichheitszeichens.Vielleicht verstehe ich nicht die Frage 🙂 Aber Erben sollte dann funktionieren... Oder vielleicht sollte er den Stil der TD (aber das ist nicht das, was er will). Und ja, müssen Sie verwenden ein ':'. Aber ich war die Eingabe schnell:$, Sorry 🙂
Ich war nur lassen Sie wissen. Sie können Ihre Antwort hinzufügen, die Doppelpunkte. 🙂 Es gibt einen Bearbeiten-link auf der unteren linken Seite.
Ja ich weiß 🙂 Aber ich hatte es nicht gesehen :$ Aber du bist Antwort oben macht mehr Sinn. Wenn es nichts zu Erben, man kann nicht Erben... Also, du hast Recht! 🙂
InformationsquelleAutor Milaan
Meine Lösung: http://jsfiddle.net/k6Dam/2/
Entfernen der inline-Stile (hoffe, dass Sie tun können) und min-Höhe der panel-Körper 200px.
Sicher, aber mit diesem markup können Sie nicht tun, ohne irgendwelche Einschränkungen. Konnte er vielleicht Lesen die Höhe des ersten Elements mit jQuery/Javascript und basiert auf den gegebenen Wert die Höhe.
Ja. Leider kann die einzige Lösung sein. 🙁
InformationsquelleAutor gearsdigital