JavaScript footer am Ende der Webseite oder am unteren Bildschirmrand

Wolly300 · 14. April 2019

Hallo zusammen,

ich habe auf meiner Webseite einen Footer. Lediglich habe ich das Problem, das manche Seiten (Content) nicht die Bildschirmhöhe ausfüllen.

Jetzt ist meine Frage, wie schreib ich am einfachsten/besten in JS mit Jquery einen Code der mir in diesem Fall(zu wenig Content für eine Seite) den Footer an den unteren Bildschirmrand festklebt ?

Vielen dank für eure Hilfe

benneq · 14. April 2019

Sowas sollte sich ohne JS lösen lassen: https://css-tricks.com/couple-takes-sticky-footer/

Wolly300 · 14. April 2019

vielen dank

Lawnmower · 14. April 2019

position: fixed des Footer und ein Padding Bottom (in Höhe des Footers) beim Inhalt (damit sich der nicht unter den Footer schieben kann) könnte auch klappen.

cbdw · 14. April 2019

Oder min height für deinen body dann ist der content nie zu klein

Bagbag · 15. April 2019

Grid! Hiermit ist es auch super einfach, beispielsweise den Header und Footer immer anzeigen zu lassen und nur den Content in der mitte zu scrollen.

https://s3.mediathekviewweb.de/public/grid-test.html

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .page {
      display: grid;
      height: 100vh;
      grid-row-gap: 1rem;
      grid-template-rows: auto 1fr auto;
    }

    .page > * {
      padding: 0.5rem;
    }

    .header {
      background-color: orangered;
    }

    .content {
      display: flex;
      justify-content: space-evenly;
      align-content: center;
      flex-direction: column;
      background-color: olivedrab;
    }

    .content > * {
      align-self: center;
    }

    .footer {
      background-color: skyblue;
    }

    .cute {
      max-width: 50vw;
      max-height: 50vh;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="header">
      <h3>My Page</h3>
    </div>

    <div class="content">
      <span>
        Content of my page
      </span>
      <img class="cute" src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?w=2000&q=10">
    </div>

    <div class="footer">
      Copyright © 2019 bagbag - All rights reserved.
    </div>
  </div>
</body>

</html>

Wolly300 · 15. April 2019

Also ich habe jetzt ein Problem mit Margin. Meine Seite enthält im Content sehr viel margin, aufgrund von diesem Margin kann ich jetzt jedoch nicht z.b. content auf 100% setzen, weil die margin aus den content-children Elementen noch eine größere margin nach unten haben. Was mache ich jetzt in so einem Fall?

2. Problem ich habe in meinem Footer ein Element das "Mitglied werden" heißt. Joch schreibt sich dieses Element beim Seite neu laden immer mit new Line zwischen diesen beiden Wörtern. Wie kann ich das unterbinden ?

Bagbag · 15. April 2019

Am besten mal den Quellcode deiner Website posten, nur dann können wir sinnvoll helfen.

Wolly300 · 15. April 2019

Der HTML Code

HTML:

<!DOCTYPE html>
<html xmlns="" xml:lang="de-de" lang="de-de" dir="ltr" style="--header_backgroundcolor: unset; --header_fontcolor:#ffffff;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <head>
            </head>
   
   
    <body class="">
        <div id="message">
            <div id="system-message-container">
        </div>

        </div>
        <header>

            <div class="header-dropdown">
                  <a id="header-dropdown">
                      <svg class="header-dropdown-svg" width="32" height="32">
                          <path d="m4,10l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2zm24,4l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2zm0,8l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2z"></path>
                      </svg>
                </a>
              </div>
            <nav class="moduletable">
                <ul class="nav menu header-content mod-list">
                    <li class="item-115 default current active"><a href="" title="Home" class="header-element">Home</a></li>
                    <li class="item-109"><a href="" class="header-element">Einsätze</a></li>
                    <li class="item-110"><a href="" class="header-element">Jugend</a></li>
                </ul>
            </nav>
        </header>
        <div class="content" style="margin: 73px 0px 0px;">
            <div id="wrapper">
                <section id="content-1">
                   
                    <div class="blog-featured" itemscope="" itemtype="https://schema.org/Blog">
                        <div class="page-header">
                            <h1>Home</h1>
                        </div>
                    </div>
                </section>
               
                <section id="content-2">
                </section>
               
                <section id="content-3">
                </section>
               
                <section id="content-4">
                </section>
            </div>    
        </div>
        <footer>
            <nav class="moduletable">
                <ul class="nav menu footer-content mod-list">
                    <li class="item-111"><a href="" class="footer-element">Datenschutz</a></li>
                    <li class="item-112"><a href="" class="footer-element">Impressum</a></li>
                    <li class="item-113"><a href="" class="footer-element">Mitglied werden</a></li>
                    <li class="item-114"><a href="" class="footer-element">Kontakt</a></li></ul>
            </nav>
        </footer>
    </body>
</html>

Die Elemente in den Sektionen haben jetzt ein margin top und/oder bottom.
So etwas wird in den sticky Footer Anleitungen nicht berücksichtigt.
Der Content wird per CMS in diesem Fall Joomla geladen

Bagbag · 15. April 2019

Das HTML nützt ohne CSS (und evtl. JS) nichts.

Suche

JavaScript footer am Ende der Webseite oder am unteren Bildschirmrand

Wolly300

Lieutenant

benneq

Fleet Admiral

Wolly300

Lieutenant

Lawnmower

Maître de cuisine

cbdw

Cadet 2nd Year

Bagbag

Commodore

Wolly300

Lieutenant

Bagbag

Commodore

Wolly300

Lieutenant

Bagbag

Commodore

Ähnliche Themen