Eine Tabelle zum Füllen von 100% Höhe in einem td bekommen

Ich versuche, eine Website im richtigen HTML neu zu schreiben. Die Seite, die ich ersetzen möchte, war eine komplette Unordnung. Ich bin auf ein Problem gestoßen, wo ich nicht <table> die Höhe der <td> füllen kann, die es enthalten ist. Ich habe versucht, height: 100% auf der <table>, die basierend auf Google und Stackoverflow Forschung sollte funktionieren, aber ich muss etwas Dummes fehlt. Ich habe versucht, das gleiche mit <divs> vor dem Wechsel zu Tabellen zu tun, aber ich bin nicht dagegen, zurück zu <divs> gehen, wenn jemand vorschlagen kann, wie es geht.Eine Tabelle zum Füllen von 100% Höhe in einem td bekommen

Der Inhalt Ich entwickle derzeit hier: http://96.0.22.228/

Aufgrund Projektzeitdruck, ich habe schlechte Hacks hatte zu verwenden, um die Seiten zu bekommen richtig suchen. Ich deklariere keine <doctype> und ich zwinge IE, IE7-Quirks-Modus zu verwenden. Ich hätte gerne Empfehlungen, wie man dieses Layout mit HTML5 und CSS richtig macht. Es muss nicht ältere Browser unterstützen, aber es muss in den neuesten Versionen von Chrome, Firefox und IE gleich aussehen. Ich würde auch gerne die Bilder für die Menüs entfernen und alles in CSS für die Rahmen und den Menütext stylen.

Obwohl ich die Seite so vervollständigen musste, wie ich bin, bin ich offen für die Rückkehr und die Reparatur später, wenn es eine gute Antwort auf dieses Problem gibt.

Quelle

2012-03-26 TheDavidFactor

gut funktionieren würden Sie mit div Geist der drei Spalten-Layout zu erreichen? Das würde die hundert Prozent Höhe viel weniger schwierig machen. – Costa

@Costa absolut, aber ich hatte andere Probleme mit den divs versuchen, das Flash-Objekt in der Mitte zu bekommen, um richtig auszurichten. Wenn Sie mir einige Vorschläge als Antwort geben könnten, würde ich es gerne versuchen. – TheDavidFactor

Es gibt eine ziemlich hoch aufgeladene, eigensinnige Debatte, die schon seit einiger Zeit über CSS-Layouts geführt wird. Hier ist ein Beispiel, beachten Sie den übertriebenen Titel: http://matthewjamestaylor.com/blog/perfect-3-column.htm Also, ich mag es, meine Layouts selbst zu erfinden und zu erfahren, was tatsächlich im Rendering passiert, und Browser Unterschiede, die verursacht Probleme. Es ist besser für mein eigenes Lernen. Lassen Sie mich etwas entwerfen und als Antwort auf Ihre spezielle Herausforderung einreichen. Ich werde anstelle des Blitzobjekts ein farbiges div mit fester Größe verwenden. – Costa

100% Höhe in einer Tabellenzelle ist immer ein Schmerz. Technisch gesehen hat ein TD keine Höhe (weil das von seinem Inhalt abhängt). Was Sie den Browser fragen, ist, das Kind 100% seines Elternteils zu machen, was 100% seines Kindes ist, was 100% seines Elternteils ist ... Sie können sehen, wie das ein Problem sein könnte.

Sie könnten versuchen, dem TD eine explizite Höhe hinzuzufügen und das Tabellenlayout zu verwenden, das in der Tabelle festgelegt ist. Zumindest kennt der Browser die Höhe des Elternteils, ohne die Größe des Kindes zu benötigen, aber das funktioniert möglicherweise immer noch nicht.

Sie müssen möglicherweise überdenken, wie Sie dabei vorgehen.

Quelle

2012-03-26 03:10:22 SpliFF

Das ist im Grunde, was ich renne. Ich würde gerne darüber nachdenken, aber ich glaube, ich habe Tunnelblick, wenn ich es zu lange ansehe. Im Grunde brauche ich die Navigation auf der linken Seite, um die Höhe des restlichen Inhalts anzupassen. Während also diese erste Seite einige Flash-Inhalte mit einer bestimmten Höhe hat, sind andere Seiten höher. Ich bin offen für alle Vorschläge ... – TheDavidFactor

Ich würde vorschlagen, die Höhe des Menüs nicht mit dem Inhalt übereinstimmen. Alles, was dazu führt, ist, dass die Schaltflächen die Größe von Seite zu Seite ändern, was zu einer inkonsistenten Navigation führt. – SpliFF

Die Schaltflächen müssen auf der gleichen Höhe bleiben, aber am unteren Rand des Menüs muss ein leerer Bereich vorhanden sein, damit die Kontur der beiden Balken für den Rest der Höhe beibehalten wird. Hier ist eine Seite von der Seite, die ich als Beispiel umschreibe: http://www.crabcay.com/spa_resort/index.asp BTW, danke, dass du dir die Zeit genommen hast, dies zu diskutieren. – TheDavidFactor

Ich habe eine Lösung, wenn Sie Ihre gewünschten Ergebnisse benötigen, können Sie die Polsterung Ihrer (td.navigation eine Klassenverknüpfung) durch diese Sie werden Ihre Ergebnisse erhalten.

gelten diese CSS: -

td.navigation a { 
    color: #837768; 
    display: block; 
    font-size: 1.2em; 
    padding: 14px 5px; 
    text-align: center; 
    text-decoration: none; 
}

Quelle

2012-03-26 04:17:03

es also hier getan mit divs, absoluter Positionierung in%, und hier ist der Teil, den Sie nicht mögen, mit einer bestimmten Höhe in Pixel festgelegt. Das Problem ist, wenn Sie Tabellenzellen (td) verwenden, haben die tds keine Höhe und jedes Element innerhalb berechnet 0 für 100% Höhe.

Wenn wir Divs verwenden, ist das Problem anders. Wir können sicherstellen, dass sie ihre height -Eigenschaft behalten, aber es gibt keine Möglichkeit, dem div auf der linken Seite zu sagen, "sei genauso hoch wie das div in der Mitte." Zumindest kenne ich das nicht. Davon abgesehen scheint es so, als wäre Ihr Flash-Objekt das Größte, und Sie könnten die Höhe aller drei Divs auf eine pixelgenaue Menge einstellen. Dann dehnen Sie die UL-Navigationsliste auf die Höhe von 100% des Divs, in dem sie verschachtelt ist.

Es gibt einen anderen Weg, dies zu tun, der Ihre Bedürfnisse besser erfüllen könnte, ich werde es ganz unten beschreiben.

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>TheDavidFactor's Layout</title> 

<style type="text/css"> 
    body, html { 
    background: black; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
    } 
    #left { 
    position:absolute; 
    top:10%; 
    left:0; 
    background: #eeeeee; 
    width: 20%; 
    padding: 2%; 
    margin:0; 
    } 
    #right { 
    position:absolute; 
    top:10%; 
    left:76%; 
    background: #eeeeee; 
    width: 20%; 
    padding: 2%; 
    margin:0; 
    } 
    #center { 
    position:absolute; 
    top:10%; 
    left:24%; 
    background: #dddddd; 
    width: 48%; 
    padding: 2%; 
    margin:0; 
    } 
    #flash { 
    background:red; 
    width: 500px; 
    height: 500px; 
    padding:0; 
    margin:0; 
    } 
    ul { 
    height: 500px; 
    padding:0; 
    margin:0; 
    padding-left:25px; 
    background: #4359ac; 
    color: #ffffff; 
    } 
    li { 
    height: 10%; 
    padding:0; 
    margin:0; 
    } 
</style> 

</head> 
<body> 

<div id="left"> 
    <ul> 
    <li>Spa</li> 
    <li>Hotel</li> 
    <li>Activities</li> 
    <li>Hobbies</li> 
    <li>Night Life</li> 
    <li>Food</li> 
    <li>Feedback</li> 
    <li>Contact</li> 
    <li>About Us</li> 
    <li>Copyright</li> 
    </ul> 
</div> 
<div id="center"> 
    <div id="flash">Here's your flash Object</div> 
</div> 
<div id="right"> 
    here's the right div 
    <br> 
    <p>Let's throw some random text in here to take up space for now.</p> 
</div> 

</body> 
</html>

Die andere Option, die Sie haben, ist die drei Säulen in einem div-Container zu verpacken, und eine Höhe für die div definieren, dann in diesem Container div jeder der Spalten zu 100% Höhe strecken.

Quelle

2012-03-26 19:51:10 Costa

Die beste Lösung hierfür ist, dass das übergeordnete Element der button ebenfalls eine Höhe von 100% hat, vorausgesetzt, dass Ihre Schaltfläche eine Höhe von 100% haben soll.

beispiels

<tr> 
    <td><button class="btn" id="1">1</button></td> 
    <td><button class="btn" id="2">2</button></td> 
    <td><button class="btn" id="3">3</button></td> 
    <td><button class="btn" id="plus">+</button></td> 
    <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td> 
</tr>

CSS:

td{ 
    height: 100%; 
} 
.btn { 
    width: 100%; 
    height: 100%; 
}

Das sollte

Quelle

2017-07-18 07:21:21 Pila

Eine Tabelle zum Füllen von 100% Höhe in einem td bekommen

Antwort

Verwandte Themen