Wie kann man einen Footer in HTML nach ganz unten setzen?

Hallo,

ich habe eine Frage: Auf meiner Webseite habe ich einen Footer, der, wenn der Bildschirm nicht so hoch ist wie die Seite selber ganz unten angezeigt wird, ich also scrollen muss, um ihn zu sehen. Wenn ich die Seite aber auf einem Monitor, der höher ist als die Seite, anschaue, dann wird der Footer "mitten auf dem Bildschirm" angezeigt.

Kennt jemand einen Link oder so, wo ich eine [elegante] Lösung mit CSS dafür finden kann?

Danke!

3 Antworten

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

01.11.2015, 13:31

html,body {height:100%}

#footer {position:absolute ; bottom: 0;}

den html und body bereich auf 100% der Ansicht

und dann per absolute anheften , aber denk daran alles im body wird drunter weg gezeigt . kann hässlich aussehen , also abstand lassen am ende damit nichts verloren geht .

userfromberlin

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

01.11.2015, 13:42

position: fixed; bottom: 0px;

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

01.11.2015, 21:24

Stichwort "Sticky Footer", siehe: http://www.html-seminar.de/sticky-footer-fussleiste-ganz-unten.htm

Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

...zur Frage

Der footer wird mitten auf der seite angezeigt, wie kann ich das beheben?

Pastebin: https://pastebin.com/uRDX8h7n

(Ich nutze pastebin, da mein code zu lang ist...)

Passwort: 55312

Der footer wird in der mitte meiner seite angezeigt, er sollt allerdings unten angezeigt werden.

ich bitte um hilfe!

...zur Frage

Footer unten auf einer leeren Seite?

Ich würde gerne das der Footer auf einer leeren Seite ganz unten ist und wenn man dann Inhalt hinzufügt, dass dieser nicht aber Fensterrand kleben bleibt sonder auf der Webseite ganz unten ist.

...zur Frage

Wie kann ich bei einer Html/CSS Website einstellen, wie weit ich nach unten scrollen kann?

Habe leider das Problem, dass ich meine HTML-Webseite sehr weit nach unten scrollen kann. Jedoch will ich das selber einstellen. Ich bitte um Hilfe!

...zur Frage

Webseiten verkaufen?

Ist es möglich Webseiten nur bestehend aus HTML und CSS zu verkaufen? Ich habe nicht vor krass aufewendige Seiten zu erstellen, sondern kleine Webseiten für Selbständige, lokale kleine Firmen usw. Also eine Seite wo die Dienstleistungen, Infos, Preise angezeigt werden. Dafür will ich halt auch nicht viel verlangen

Meine Webseiten sind: Responsive, modern, benitzerfreundlich und haben alles was eine Webseite haben sollte wie: Navigation bar, Footer, usw.

...zur Frage

Wie bleibt der Footer immer ganz unten der Seite (CSS,HTML)?

Hllo, ich möchte den Footer immer ganz unten der Seite haben. Allerdings ist ern nicht ganz unten wenn ich z.B. nur 1. Satz geschrieben habe... hier klappts nicht Beispiel: http://tom.musicintime.de/ hier klappts Beispiel: [Impressum]

Ich habe das mit footer { position: relative; width: 100%; } ausprobiert allerdings mit diesem Ergebniss

Wie kann ich Den Footer IMMER am Seitenende haben egal wie viel Inhalt ich habe?

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

HTML/CSS Button erstellen, der unten rechts fixiert ist?

Ich brauch einen Cookies-Hinweis, der soll als Button unten rechts angezeigt werden, ohne, dass sich dieser beim scrollen mitbewegt. Hab schon gegooglet, bin wohl zu dumm, würd mich über einen responsiven Code freuen (<button>)

...zur Frage

CSS Footer ins Background-Bild packen?

Hay,

ist vllt eine dumme frage, aber ich kenne mich noch nicht so gut aus und bin gerade am verzweifeln... wie kann ich die drei Bilder nicht unter das Bild packen, sondern unten links in das Bild?
Danke für Antwort!

Bild musste ich löschen....

...zur Frage

HTML/CSS Hintergrund "festhalten"?

Hey,

Ich bin gerade dabei ein Forum zu programmieren, und nehme mir ein Vorbild an http://forum.diesesforum.de/index.php Man muss sich glaube registrieren damit man das gut sehen kann.

Aber ich wollte mal fragen, wie ich es schaffe, das dieser Graue Hintergrund beim Scrollen nicht mitkommt sondern da bleibt, also das der Header und der Boty und Footer sozusagen dadrüber fliegen.

Danke im Vorraus

...zur Frage

HTML und CSS webseite soll auf jedem Bildschirm gleich aussehen?

Hallo, ich bin dabei eine Webseite zu programmieren und habe meine webeseite nun auf einem Laptop offen. Nun würde ich aber gerne wissen wie der Code dafür lautete das meine Internetseite auf meinem 12 Zoll laptop genau so aussieht wie auf meinem 24 zoll Bildschirm. auf meinem Laptop ist alles zusammengedrückt. Im internet finde ich dazu leider nichts.

...zur Frage

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zur Frage

Wie kann ich den Hintergrund einer Webseite beim scrollen seitlich bewegen lassen?

Ich bin relativ neu in der Webdesign-Branche und surfte etwas, um mir Inspirationen einzufangen. Bei der Internetseite der Firma Unilever (Unilever.com). blieb ich hängen und fragte mich, wie es wohl funktioniert, dass sich der Hintergrund beim auf und ab scrollen horizontal bewegt. nur mit html und css ist dies nicht möglich, oder? aber wie dann?

...zur Frage

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen