Scrollen Zelle in einer 100% Höhe der TABELLE

Tut mir Leid wenn das schon beantwortet wurde, aber es ist irgendwie schwer zu suchen für etwas, das mit "100% height".

Mein problem ist, dass ich 100% - Höhe-Tisch-layout, weil die automatische Zelle Größenanpassung erfolgt durch browser, die ich nicht wollen, um Skript selber aus offensichtlichen Gründen.

Unterscheidet es sich von anderen "100% Probleme", dass ich muss einige Zellen-stick auf der Oberseite und einige auf dem Boden, und haben in der Mitte Größenänderung von browser zu füllen verbleibenden Platz.

Diese Art funktioniert, das problem tritt auf, wenn ich Sie brauche, dass im mittleren Teil enthalten überlaufen Zeug, und natürlich möchte ich overflow:auto ermöglichen Anwender durch das Zeug. Es funktioniert in WebKit, Firefox, tut es nicht, andere nicht getestet. Hier ist der Testfall.

<html>
<head>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            overflow: auto;
            height: 100%;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td style="height:50px"></td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
        <tr>
            <td class="fill">
                <div class="cont">
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
                </div>
            </td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
    </table>
</body>

Ich glaube, Sie müssen formulieren Sie Ihre Frage. Im moment klingt es so, als wenn du sagst "ich will X erreichen, also muss ich mit Y .. wie kann ich machen Y arbeiten?" Ich denke, Sie sollten sich Fragen, "ich möchte X erreichen .. was ist der beste Weg zu erreichen ist mein Ziel".
Viele Jahre später-und dies ist noch immer nicht gelöst 🙁

InformationsquelleAutor skrat | 2009-10-19

Ich nur eine Frage beantwortet, wie diese heute, und ich glaube, du bist auf der Suche nach der gleichen Sache, hier ist die Frage selbst und meine Antwort:

HTML

<div class="container">
    <div class="twenty">
        fixed height 20
    </div>
    <div class="fifty">
        fixed height 50
    </div>
    <div class="hundred">
        fixed height 100
    </div>
    <div class="auto">
        <div class="content">
            ....
        </div>
    </div>
    <div class="fifty" style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    height:100%;
}

.twenty, .fifty, .hundred, .auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

Vollständige Ansicht: http://jsfiddle.net/8abeU/show/
Fiddle: http://jsfiddle.net/8abeU

funktioniert leider meine app ist fest in den 90er Jahren (Quirks-Modus IE8) und es deshalb nicht so verhält wie erwartet.

InformationsquelleAutor Andres Ilich

-2

Ich bin mir nicht sicher, ob ich verstehe, warum Sie benötigen, um eine Tabelle zu verwenden. Wenn Ihr Ziel ist einfach um ein layout zu erstellen, dass immer die sich über die gesamte Höhe des browser-Fensters, wenn der Inhalt in der Mitte ist klein und passt vertikal, wenn das Gehalt erhöht, dann CSS ist alles, was Sie brauchen.

<html>

<head>
<style>

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   height:100%; /* Necessary for IE 
   position:relative;
   background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
   background-color: red; /* Set equal to background-color of #container */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

</style>
</head>

<body>

<div id ="container">
    <div id="header"></div>
    <div id="body">
    This is resizable.
    </div>
    <div id="footer"></div>
</div>

</body>

</html>

In dieser Anleitung erfahren Sie , wie es zu tun (alles, was ich Tat, war Bearbeiten Sie die hintergrund-Farben der container und Körper divs um die illusion zu erzeugen, dass der mittlere Inhalt umfasst 100% der Höhe. passen Sie die css-Breite, etc... passen Sie Ihr layout).

InformationsquelleAutor Choy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.