Finde den Fehler... (Verzweiflung)

[Svenmann]

Hallo zusammen,

wie Ihr sicher an der Überschrift Festellen konntet geht es um einen Fehler den ich nicht finde.
Ich bin mir sicher, dass es eine Kleinigkeit ist, ich aber gerade vor lauter Bäumen den Wald nicht mehr sehe

Ich bin auf ein Feedback von euch angewiesen!

folgendes Problem habe ich...

Ich habe meinem <main>-Tag die Klasse "main-wrapper" zugewiesen.

.main-wrapper {
     position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0px;
    padding: 0px 200px 0;
    color: rgba(0,0,0,1.00);
    background-color: rgba(221,221,221,1.00);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.25em;
    z-index: 100;
}

die Hintergrundfarbe (hell grau) geht nicht bis zum unteren Bildschirmrand.
hier ist der link zu meiner Homepage ( klick ).
Lasst euch nicht von den vielen Farben stören das wird alles noch geändert

Wie Ihr seht geht der .main-content bis ganz nach unten.

Kann mir da jemand helfen?

Danke und Gruß
Svenmann

 

[Aaron3219]

Nimm das height: 100vH; weg. Damit gibst du doch an, dass es eine Bildschirmhöhe sein soll. Es soll aber ja über den kompletten Bildschirm gehen. Also wegnehmen oder 100% setzen.


Btw, du hast hier einige unschöne Sachen gebaut.
Du benutzt beispielsweise viel zu viel position: absolute, floats und Größenangaben wie vw und vH.
Zum Thema Größenangaben in vw, kann ich dir direkt einen Nachteil zeigen, der auf deiner Seite bereits zu sehen ist.
width: 100vw, gibt an, die Breite um eine volle Bildschirmgröße zu setzen, also z.B. 1920px.
Das Browserfenster ist aber durch die Scrollbar einen Tick kleiner. Was also passiert ist, es setzt einen Horizontalen Scrollbalken.
Das sind einfach unschöne Sachen, die sich durch %-Angaben einfach vermeiden lassen.

Prozentangaben orientieren sich immer an ihrem Mutterelement. Also z.B. 50% der Breite des übergeordneten Containers.
Und Child-Elemente sollten in der Regel eh nicht größer sein als ihr Mutterelement.

Nimm dir also die Tipps zu herzen und verändere da nochmal was.

Edit:
Da basti es schon genannt hat:
Schau dir unbedingt Flexboxen an. 95% deiner Seite kann man damit sauber aufbauen.

 

[basti1012]

Hast du dir die Css zusammen Kopiert ?
An besten solltest du mal die ganze Css wegschmeißen und mit Flexboxen neu aubauen.Das grundgerüst hast du in 5 Minuten fertig und dann sieht es genau so aus wie du es möchtest

 

[Sailor]

Hast du dir die Css zusammen Kopiert ?

Das ist wieder eine von diesen WordPress Seiten... da wird das CSS mitgeliefert - dazu noch Bootstrap und jede Menge anderer unnötiger Kram!
Da stellt man so einfach nichts auf Flexbox um... da muss man nehmen, was WordPress und das gewählte Theme mitbringen.

 

[Svenmann]

hey,

danke euch beiden!!
ich werde mit mal das Thema Flexboxen anschauen.

Vielen dank!!

Gruß Svenmann