Wie bewerben "height:auto", um eine HTML-Tabelle-Spalte? (oder so ähnlich)

Werde ich schnell auf dieses:

Habe ich ein einfaches HTML-Layout mit einer 2 Spalten Tabelle, passt sich dem Fenster... linken Spalte wird verwendet, um den aktuellen Inhalt der Webseite (so hat es mehr Breite) und die Rechte Spalte dient als eine Sidebar (es ist, wie weniger als 200px Breite). Ich habe auch eine kleine Fußzeile. Das problem ist, dass beim testen der Webseite in verschiedenen screen-Auflösungen, alle Elemente scheinen in Ihr zu arrangieren in Ordnung, aber wenn Sie kommen, um eine "1200px" height Bildschirm der rechten sidebar trennt sich von der Fußzeile (Sie gehören zusammen) Die Fußzeile passt gut in die Unterseite von der Seite, egal, die Auflösung und alle Elemente auf der Webseite, die schön Aussehen, aber die Rechte sidebar nicht. Warum ist das passiert? Wie kann ich die Zelle/Spalte anpassen-Bildschirm-Auflösung Höhe? es scheint die Anpassung an linke Spalte Inhalt Höhe und nicht auf dem Bildschirm in der Höhe, Warum ist das passiert? Wie kann ich es beheben?

Basic-Beispiel-Code von der Tabelle:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    overflow: auto;
}
#tabla {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #444;
    background-color: #ffc;
}
.celda_dcha {
    width: 200px;
    border: 1px solid #444;
    background-color: #cfc;
}
</style>
</head>

<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
    <tr>
        <td>Contenido</td>
        <td class="celda_dcha">Columna para imágenes</td>
    </tr>
</table>
</body>

</html>
  • Nutzung von Tabellen für layout-Zwecke ist als schlecht in diesen Tagen. Verwenden Sie Ihre bevorzuge Suchmaschine auf und suchen Sie nach "css-basierte Spalten-layout". Ich denke, davon profitieren Sie langfristig.
  • Danke, aber das ist nicht die Antwort, die ich Suche... Eigentlich habe ich versucht, mit CSS-layouts, aber nicht für meine propouse :S Trotzdem, vielen Dank für die Ratschläge 🙂
  • Poste bitte eine (vereinfachte) version des html-code, so dass wir sehen können, wie Sie aufgebaut Ihren Tisch
  • Es ist der code, Danke
  • Danke! in deinem code sehe ich nicht in der Fußzeile, über die Sie schreiben...
  • Nein, der footer nicht da ist, aber eigentlich ist es nicht wichtig, es passt fein zu änderung der Auflösung, mein problem ist mit der rechten Spalte der Tabelle 😛

InformationsquelleAutor Jmlevick | 2011-03-19
Schreibe einen Kommentar