CSS-content-div zu erweitern, um den unteren Rand der Seite

Ok, ich habe versucht, VIELE der angebotenen Lösungen in StackOverflow zu diesem Problem, aber keiner von Ihnen gearbeitet haben. Ich denke, das ist eine heikle Sache und braucht eine trickreiche Lösung.

Was ich gesehen habe, jedes problem ist anders mit diesem 'besetzen' die Körper-Ding, so dass ich denke, ich bin hier mit einem anderen.

Ich brauche wirklich Hilfe hier, Jungs.

Hier ist mein problem: http://jsfiddle.net/Ff49Z/5/

Und heres, was ich will: Wenn das "wrapper" - div nicht erfüllt, der Körper, ich möchte das div zu erweitern, um die Unterseite der es trotzdem. Also, in der Geige, was ich versuche zu erreichen, ist nicht ein grauer Fleck auf meinem layout. Wie Sie sehen können, Wrapper sind 100% der Höhe (das ist eine gängige Lösung angeboten, SO dass für dieses problem) und das hilft nicht.

Es ist das div nicht vergrößert, so dass die wrapper:

div#middle {
    padding:10px;
    margin:0 auto;
    height: 100%;
}

BTW, wenn overscrolling -, Fußzeilen-sticks und wrapper-Schriftrollen. Das ist das gewünschte Verhalten, und es funktioniert einwandfrei.

InformationsquelleAutor gomman | 2013-04-15

4

Added mich einfach:
```
div#middlewrap {
    width:100%;
    position:absolute;
    margin-top:60px;
}
```
und funktioniert wie gewünscht. EDIT: DIES IST FALSCH - die richtige Antwort unten

Ich wollte schon aufgeben, als ich beschloss, zu schreiben, die css von Grund auf, und es kam einfacher als ich erwartet hatte. Ich vereinfachte die CSS auf die Knochen, und ein paar Coole overflow-y:auto; zu der Mitte-wrapper plus ein paar süße position:fixed; um die Kopf-und Fußzeile. Dann habe ich angepasst, die Polsterung an der #middle content-div und fügte hinzu, eine height:100%; um die body und html(so, dass jedes Kind der Körper kann erfolgreich gesetzt werden, um height:100%;) und das ist was raus kam:
```
body, html {
    margin:0;
    height:100%;
}
div#headerwrap, div#footerwrap {
    position: fixed;
    left: 0;
    right: 0;
}
div#headerwrap {
    top: 0;
    height:64px;
    background-color: red;
}
div#middlewrap {
    height:100%;
    overflow-y:auto;
    background-color: blue;
}
div#middle {
    padding-top:70px;
    padding-bottom:35px;
}
div#footerwrap {
    bottom: 0;
    height:32px;
    background-color: green;
}
```
Das ist die CSS, die Sie benötigen. Ziemlich cool, uh?

HIER IST DIE GEIGE

Hinweis: ich respektierte Ihre syntax, was ja auch richtig ist, aber es ist nicht notwendig zu schreiben, DIV, bevor alle #ID im css. Das löschen dieser Selektoren wird sich drastisch verringern Sie Ihre css-Datei Gewicht in größeren Projekten.

Cheers.

first off, ich danke dir für die Antwort, aber es funktioniert nicht wie ich fragte, wie eine Bildlaufleiste angezeigt wird, wenn Sie nicht benötigt werden. Ich will einfach den div um den Boden zu erreichen auf der Seite (ganz unten, glaube ich, nicht mehr und nicht weniger), wenn der Inhalt nicht erfüllen, die container, aber die scrollbar sollte nur erscheinen, wenn erforderlich (das funktionierte auf meinem Tannen fiddle). Ich werde weiterhin versuchen, vielen Dank.
Sie müssen nur zum einstellen/löschen Sie die Polsterung Eigenschaften zu vermeiden, den overscroll. wenn es dir geholfen bitte beachten akzeptieren Sie meine Antwort als korrekt. cheers.
hier gehen Sie, nur gezwickt einige z-index-Eigenschaft und gelöscht, alle margin/padding auf Wrapper. Sie können Sie zu verwalten durch die inneren divs. cheers. jsfiddle.net/Ff49Z/10
das bricht mir das sticky-header aus der ersten Geige. wenn der Inhalt overscrolls, das scrollen überschreibt den Kopf. Polsterung nicht dieses Problem zu lösen 🙁
ok, wir gebucht in der gleichen Sekunde. auf die Letzte Lösung, das overscrolling das funktioniert nicht. Wenn der Inhalt overscrolls der wrapper nicht wachsen.

InformationsquelleAutor Yenn

Machen alle übergeordneten Elemente als height:100%:

body, html, body>div#middlewrap {
    height: 100%;
}
div#middle {
    min-height:100%;
}

InformationsquelleAutor staircasebug

0

Unmöglich allein mit CSS. Müssen javascript beteiligt. Nehmen Sie den client in der Höhe (header + footer) = min Höhe für den Inhalt

% Höhe funktioniert nicht, weil die Eltern nicht haben eine Höhe definiert.

danke, ich versuche es einfach zu halten, aber ich werde in mit JS, wenn keine CSS-Lösung funktioniert.

InformationsquelleAutor Thanh Trung

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.