[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REDAXO Forum • Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Seite 1 von 1

Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 10:40
von Rumi
Hallo

nach langem Pröbeln habe ich es geschafft dass der navi-div immer so hoch ist wie der body. Nun ist aber der body nicht so hoch wie der html-container, und dies zu ändern ist mir bisher nicht gelungen. Kann mir jemand sagen was ich anders machen muss?

http://kulturkoller.ch/prep_460/

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 11:02
von anita
hallo,

Du hast einen Fehler im Quelltext, das letzte div: </dic>

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 11:12
von Rumi
anita hat geschrieben:hallo,

Du hast einen Fehler im Quelltext, das letzte div: </dic>
Ohweh, danke für den Hinweis!

Ich habe das nun korrigiert, das hat das Problem aber nicht kuriert.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 11:24
von anita
hm,

was meinst Du mit html-container

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 11:29
von Rumi
anita hat geschrieben:hm,

was meinst Du mit html-container
Anders gesagt: Ich möchte dass <body> den ganzen Bildschirm ausfüllt. Zur Zeit hat es unten einen Bereich welcher vom body nicht ausgefüllt wird.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 12:08
von anita
achso,

da frag ich jetzt aber warum, was ist Sinn und Zweck der Übung?

Soll es nur in der Höhe sein? Aber wenn die Seite unten weiss ist, macht das doch gar keinen Sinn.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 12:14
von runstop64
Hi,

Code: Alles auswählen

html, body {
    height:100%;
    margin:0;
    padding:0;
}
Ist dein Inhalt länger als das Browserfenster, kannst du statt height min-height verwenden.

Nebenbei bemerkt hast du Tabellenelemente ohne umschließende Tabelle im Quelltext und solltest nochmal die korrekte Auszeichnung der Attribute prüfen (http://webdesign.about.com/od/html5tags ... ibutes.htm), um Fehlerquellen zu verringern.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 12:31
von Rumi
@Anita: Es geht darum dass der blaue nav-div immer bis ganz unten gehen soll.

@Daniel: Super, mit dieser einfachen Lösung hat es geklappt, herzlichen Dank! Offenbar habe ich das trotz allem Pröbeln nie so gemacht.

Zu Deinen Hinweisen: Was ist denn drin das nach Tabelle klingt?
Ich habe dieses Redaxo-Paket von einem Kollegen, und während es toll ist dass da schon so viel vorbereitet ist kann es manchmal auch schwierig sein nachzuvollziehen warum er was gemacht hat.
Danke für den link bezüglich XHTML und """!

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 12:34
von Rumi
Sorry, hab erst jetzt den Quelltext der verlinkten Seite richtig angeschaut, und natürlich die tr's und td's gefunden. Ja, das ist eine Vorlage meines Kollegen. Davon bleibt nichts in der Endfassung der Webseite.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 12:42
von Rumi
Nun hab ich aber das Problem dass die Seite mit height=100% nicht scrollt wenn der Inhalt grösser ist als das Browserfenster, und mit min-heigh=100% wird der blaue nav-div doch wieder kürzer als das ganze Fenster. Hmmm.

http://kulturkoller.ch/prep_460/agentur
http://kulturkoller.ch/prep_460/

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 13:10
von runstop64
In welchem Browser testest du? Ich nehme an, IE9.
Der unterstützt das Flexbox-Modell (display:flex) noch nicht. Hier müsstest Du also entweder selbst was per JS bauen, wie Anita vorschlug, oder einen Polyfill benutzen: https://github.com/doctyper/flexie

Damit sollte es auch in älteren Browsern funktionieren.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 13:15
von runstop64
Alternativ kannst du natürlich auch einfach dafür sorgen, dass die Inhalte eine bestimmte Länge nicht unterschreiten...

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 13:27
von Rumi
runstop64 hat geschrieben:In welchem Browser testest du? Ich nehme an, IE9.
Der unterstützt das Flexbox-Modell (display:flex) noch nicht. Hier müsstest Du also entweder selbst was per JS bauen, wie Anita vorschlug, oder einen Polyfill benutzen: https://github.com/doctyper/flexie

Damit sollte es auch in älteren Browsern funktionieren.
Ich benutze Firefox 30.0 für Mac, aber in Safari sieht es noch schlimmer aus.
Ich versuchs mal mit diesem Polyfill, danke!

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 13:27
von Rumi
runstop64 hat geschrieben:Alternativ kannst du natürlich auch einfach dafür sorgen, dass die Inhalte eine bestimmte Länge nicht unterschreiten...
Ja, diese Idee hatte ich auch, aber das scheint mir etwas zu unsicher.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 13:53
von runstop64
Der Polyfill ist eigentlich nur für ältere Browser nötig.
Für Safari benötigst du noch ein Prefix.
Schau dir dies hier mal an:
http://www.smashingmagazine.com/2013/05 ... h-flexbox/
http://www.sketchingwithcss.com/samplec ... sheet.html

Wenn Dein Navigationsbereich kurz bleibt, gäbe es auch noch die Möglichkeit den Bereich links zu fixieren und nicht mitscrollen zu lassen.

Edit: Link angepasst

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 14:14
von Rumi
runstop64 hat geschrieben:Der Polyfill ist eigentlich nur für ältere Browser nötig.
Für Safari benötigst du noch ein Prefix.
Schau dir dies hier mal an:
http://www.smashingmagazine.com/2013/05 ... h-flexbox/
http://www.sketchingwithcss.com/samplec ... tml#center

Wenn Dein Navigationsbereich kurz bleibt, gäbe es auch noch die Möglichkeit den Bereich links zu fixieren und nicht mitscrollen zu lassen.
Hallo Daniel

herzlichen Dank, mit dem ersten link (flexbox) und etwas Pröbeln hab ichs nun hingekriegt dass der linke blaue div immer ganz nach unten geht. Dafür hat er jetzt je nach Browser eine andere Breite und ein anderes layout. Jetzt kommt mir allenfalls das float in die Quere?
Ich pröble mal weiter. Das ist nicht das erste Mal dass ich Mühe habe mit divs die dynamisch die ganze Länge ausfüllen sollen. Ich hoffe ich habe nach dieser Odyssee dann mal ein Konzept das funktioniert!

Das mit dem Fixieren ist auch ein guter Ansatz, danke! Ich finde es aber trotzdem am besten wenn die Webseite allen Bildschirmgrössen standhält, und der Bereich rechts in keinem Fall eine unnötige leere Fläche aufweist.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 14:23
von Rumi
Hmm, funktioniert doch noch nicht. Ich habe unbeabsichtigt von dieser flexbox-Webseite ein height:100% reinkopiert, das machte wieder den Zustand dass der linke div immer nach unten geht, aber nicht gescrollt werden kann.
Das ist ja mal wieder ein lustiger Tag.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 14:50
von anita
vielleicht versuchst Du es doch mal mit Javascript, geht mit JQuery ganz einfach

Code: Alles auswählen

$(function(){
    $(window).resize(function(){
        $("div.classname").text("inner Height = " + $(window).height());
        });
    });
JQuery einbinden nicht vergessen

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 14:59
von Rumi
anita hat geschrieben:vielleicht versuchst Du es doch mal mit Javascript, geht mit JQuery ganz einfach

Code: Alles auswählen

$(function(){
    $(window).resize(function(){
        $("div.classname").text("inner Height = " + $(window).height());
        });
    });
JQuery einbinden nicht vergessen
Ja, herzlichen Dank, ist wohl doch vernünftiger. Wäre schön gewesen endlich ein CSS zu haben das einfach funktioniert für diesen doch sehr häufigen Fall.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 15:09
von runstop64
Das Problem ist allerdings, dass es mit CSS erst mit dem Flexbox-Modell möglich ist, Elemente einfach auf gleiche Höhe aufzuziehen. Sobald Du Browser unterstützen musst/willst, die das nicht können, kommst Du ums Tricksen nicht nicht herum.

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 15:16
von Rumi
anita hat geschrieben:vielleicht versuchst Du es doch mal mit Javascript, geht mit JQuery ganz einfach

Code: Alles auswählen

$(function(){
    $(window).resize(function(){
        $("div.classname").text("inner Height = " + $(window).height());
        });
    });
JQuery einbinden nicht vergessen
Liebe Anita

tut mir leid dass ich jetzt so eine Anfängerfrage stellen muss: Wo füge ich diesen Code ein (im CSS oder im header), und muss ich noch der Funktion oder Variablen einen Namen geben?

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 3. Jul 2014, 15:20
von Rumi
runstop64 hat geschrieben:Das Problem ist allerdings, dass es mit CSS erst mit dem Flexbox-Modell möglich ist, Elemente einfach auf gleiche Höhe aufzuziehen. Sobald Du Browser unterstützen musst/willst, die das nicht können, kommst Du ums Tricksen nicht nicht herum.
Ja, diese Situation finde ich erstaunlich nach all den Jahren.

Danke für Eure Hilfe!

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 7. Jul 2014, 00:04
von Ingo
gib dem <html> ein blaues, vertikal kachelndes hintergrundbild und gut ist. google: "faux columns"

Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>

Verfasst: 10. Jul 2014, 15:23
von Rumi
Ja, herzlichen Dank! Ich erinnere mich dass ich sogar bereits mit faux columns gearbeitet habe, in der Zwischenzeit hatte ichs aber wieder vergessen.

Noch einfacher gings nun mit der hier empfohlenen Methode:
http://www.vanseodesign.com/css/equal-height-columns/
Einfach den body mit der Hintergrundfarbe der kürzeren column füllen! Da bei der Webseite an der ich dran bin die Navi immer kürzer ist als der content funktioniert das prima.

Davor hatte ich was halbwegs Brauchbares mit Responsive Design und absoluter Positionierung hingekriegt. Aber das hier ist natürlich viel eleganter, simpler, und wohl auch Browser-kompatibler.

Ganz herzlichen Dank an alle!