1 Seite ohne Scroll-CSS erstellen

Lesezeit: 2 Minuten

Benutzeravatar von Alex
Alex

möchte 1 statische Seite anzeigen, die alles ohne Scrollen enthält

versucht, Körperpolsterung 0 und Überlauf zu machen: versteckt, aber nichts funktioniert auch versucht, den folgenden Seitenkopf- und Hintergrundbildcode zu funktionieren

    display: flex!important;
    flex-direction: column!important;
    min-height: 1vh!important;
}```

```.background-image {flex-grow: 1!important;}

1 page with cover image and footer info, dont know what i am missing to fix that

Wenn Sie den Text so einstellen, dass er einen Überlauf von versteckt in CSS hat, wird es dem Benutzer nicht erlaubt, die Seite nach unten zu scrollen.

body {
  overflow-y: hidden;
}

Benutzeravatar von AugustoM
AugustoM

Gehen Sie zum Root-HTML-Element, Sie können es so gestalten:

html {
height: 100%;
width: 100%;
overflow: hidden;
}

Der Browser interpretiert dies so, als würde der HTML-Code 100 % der nutzbaren Gerätebreite verwenden und den Rest ausblenden.

Benutzeravatar von user127091
Benutzer127091

Wahrscheinlich möchten Sie das Scrollen nicht vermeiden, sondern die Seitenelemente an den Bildschirm anpassen, damit es keinen Scrollbalken gibt und trotzdem alles sichtbar ist.

Als Anfang könnten Sie die Klasse .main (die nur Ihre Fußzeile enthält) absolut unten positionieren und von dort aus übernehmen

.main {
position: absolute;
bottom: 0;
width: 100%;
}

oder, was ich bevorzuge, setze den Wrapper auf eine Flexbox: AKTUALISIERT

body.home {
height: 100%;
overflow: hidden;
}

body.home .wrapper {
display: flex;
flex-direction: column;
}

/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}

  • Hallo Mann, vielen Dank, dass Sie sich die Zeit genommen haben, mir zu antworten und mir zu helfen. Ich habe die erste Lösung ausprobiert und funktioniert auf der Hauptseite sooo gut, aber die andere Seite verschwindet oben, Sie können das ungefähr sehen. 2. Lösung funktioniert so gut, aber es passt nicht alles und der Bildschirm hat 2 viel Weiß unter der Fußzeile, ich wende jetzt die 2. Option an, vielen Dank noch einmal

    – Alex

    9. August 2019 um 21:45 Uhr

  • Kein Problem. Ich habe meiner Antwort einen Fix hinzugefügt, damit Sie die Stile nur auf die Titelseite anwenden können.

    – Benutzer127091

    9. August 2019 um 22:04 Uhr

  • Mann, es war ein Fehler, diesen Kontakt zu haben, ich habe ihn gerade entfernt, soll ich diesen Fix trotzdem versuchen. Ich möchte nicht, dass ich mich berühre. Nur diese klassische Fußzeile, die ich habe, ist großartig

    – Alex

    9. August 2019 um 22:11 Uhr

  • Ich habe mir Ihre Seite noch einmal angesehen und meine Antwort aktualisiert. Wenn Sie den alten Code durch den nach UPDATED ersetzen, sollten Sie keine Leerzeichen mehr unter der Fußzeile sehen.

    – Benutzer127091

    10. August 2019 um 0:06 Uhr

  • Hallo Mann, ich habe diesen Heimcode so verwendet und er funktioniert erstaunlich, body.home .main { position: absolute; unten: 0; Breite: 100 %; } Apropos Fußzeile, weißt du, wie ich diese Linie in voller Breite machen kann, damit ich sie wie 2 Teile trennen kann? Ich habe viel versucht, aber es scheint ein bisschen schwierig zu sein oder mein Gehirn ist an diesem Punkt geschlossen 🙂

    – Alex

    10. August 2019 um 0:24 Uhr


1427800cookie-check1 Seite ohne Scroll-CSS erstellen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy