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

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 10:40

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/

Benutzeravatar
anita
Beiträge: 711
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

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

3. Jul 2014, 11:02

hallo,

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

javanita engineering, immer eine zündende Idee
http://www.javanita.com

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 11:12

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.

Benutzeravatar
anita
Beiträge: 711
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

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

3. Jul 2014, 11:24

hm,

was meinst Du mit html-container
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 11:29

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.

Benutzeravatar
anita
Beiträge: 711
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

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

3. Jul 2014, 12:08

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.
Zuletzt geändert von anita am 3. Jul 2014, 12:25, insgesamt 1-mal geändert.
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

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

3. Jul 2014, 12:14

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.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 12:31

@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 """!
Zuletzt geändert von Rumi am 3. Jul 2014, 12:51, insgesamt 1-mal geändert.

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 12:34

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.

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 12:42

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/

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

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

3. Jul 2014, 13:10

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.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

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

3. Jul 2014, 13:15

Alternativ kannst du natürlich auch einfach dafür sorgen, dass die Inhalte eine bestimmte Länge nicht unterschreiten...
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 13:27

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!

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 13:27

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.

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

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

3. Jul 2014, 13:53

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
Zuletzt geändert von runstop64 am 3. Jul 2014, 15:14, insgesamt 1-mal geändert.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 14:14

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.

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 14:23

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.

Benutzeravatar
anita
Beiträge: 711
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

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

3. Jul 2014, 14:50

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
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 14:59

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.

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

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

3. Jul 2014, 15:09

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.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 15:16

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?

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

3. Jul 2014, 15:20

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!

Ingo
Beiträge: 782
Registriert: 24. Jun 2010, 00:34

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

7. Jul 2014, 00:04

gib dem <html> ein blaues, vertikal kachelndes hintergrundbild und gut ist. google: "faux columns"

Rumi
Beiträge: 73
Registriert: 20. Aug 2010, 01:35

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

10. Jul 2014, 15:23

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!

Zurück zu „Sonstiges“