2017-07-01 5 views
-3

Ich möchte eine Fußzeile, die am unteren Rand der Seite ist, sowohl im Falle von wenig Inhalt und für den Fall, dass es sehr wenig ist.Fußzeile zum Ende der Seite

Ich habe bereits mehrere Tutorials verfolgt, aber entweder nicht funktioniert oder nicht das gewünschte Ergebnis, vielleicht habe ich etwas falsch versucht.

Jeder kann mir helfen? Danke

EDIT: hier ist es mein Code

HTML Seite

<html> 
    <head> 
     <title> 
      Test Pagina Vuota Footer 
     </title> 
     <style type="text/css"> 
      html, body, .container { 
       margin: 0; 
       padding: 0; 
      } 
      body { 
       background-color: green; 
       color: white; 
      } 
      .container { 
       padding-top: 97px; 
      } 
     </style> 
     <script src="/inc/jquery.js"></script> 
     <script src="/inc/sticky-footer.js"></script> 
    </head> 
    <body> 
     <div class="container"> 

      <? include("./inc/navbar"); ?> 

      <div class="content"> 
       content of page 
      </div> 


     <?php include("./inc/footer"); ?> 
     </div> 
    </body> 
</html> 

HTML der Fußzeile

<html> 
    <head> 
     <title> 
      /inc/footer 
     </title> 
     <meta name="description" content="Footer del sito"> 
     <style type="text/css"> 
      .footer { 
       width: 100%; 
       background-color: orange; 
       color: white; 
      } 
     </style> 
     <script src="/inc/jquery.js"></script> 
     <script src="/inc/footer.js"></script> 
    </head> 
    <body> 
     <div class="footer"> 
      &copy; ************.altervista.org 2017 
     </div> 
    </body> 
</html> 

JS-Datei

// Window load event used just in case window height is dependant upon images 
$(window).bind("load", function() { 

     var footerHeight = 0, 
      footerTop = 0, 
      $footer = $("#footer"); 

     positionFooter(); 

     function positionFooter() { 

       footerHeight = $footer.height(); 
       footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; 

       if (($(document.body).height()+footerHeight) < $(window).height()) { 
        $footer.css({ 
         position: "absolute" 
        }).animate({ 
         top: footerTop 
        }) 
       } else { 
        $footer.css({ 
         position: "static" 
        }) 
       } 

     } 

     $(window) 
       .scroll(positionFooter) 
       .resize(positionFooter) 

}); 
+0

Können Sie bitte Ihren Code teilen? – Mika

+0

Sie müssen uns Code zeigen. Und meinst du, du willst, dass es am unteren Rand der Seite (sticky) oder immer am unteren Rand des Ansichtsfensters angezeigt wird, egal wie weit du gescrollt (fixiert) bist? –

+0

Bitte senden Sie den Code, wo Sie Probleme haben –

Antwort

2

Die flex ible Weg ist wahrscheinlich display: flex; flex-direction: column; min-height: 100vh; auf .container, zu verwenden und margin-top: auto auf .footer so wird es sich der Flex-Elternhauptachse bis zum Ende schieben.

Sie sollten auch alle <html><body> strukturellen Zeug aus Ihrem Footer Include entfernen, insbesondere Bündelung Skripts, die Sie bereits auf der Seite wie jQuery enthalten haben. Sie benötigen nur die Elemente für die Fußzeile selbst.

html, body, .container { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: green; 
 
    color: white; 
 
} 
 
.container { 
 
    padding-top: 97px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    box-sizing: border-box; 
 
} 
 
.footer { 
 
    background-color: orange; 
 
    color: white; 
 
    margin-top: auto; 
 
}
<div class="container"> 
 

 
    <nav>nav</nav> 
 

 
    <div class="content"> 
 
    content of page 
 
    </div> 
 

 
    <div class="footer"> 
 
    &copy; ************.altervista.org 2017 
 
    </div> 
 
    
 
</div>

+0

Also in den Dateien auf der Seite muss ich nur den Fußzeilen-Code, ohne eine echte Seite, die im Lieferumfang enthalten ist zu setzen? – Takabrycheri

+0

@Takabrycheri richtig. Sie brauchen nur <head> 'auf der Seite einmal. Ihre Include-Dateien sollten nur der HTML-Code für den Fußzeilencode sein. Keine Notwendigkeit, '<html>' <body> ', usw. in einer Seite zu verschachteln, die bereits' <html><body> 'hat, etc. Und wenn das JS, das Sie einschließen, die klebrige Fußzeile ist, glaube ich nicht, dass Sie sie wenn meine CSS-Lösung benötigen arbeitet für dich. Sie vermissen auch '<! Doctype html>' in Ihrem Haupt-HTML. Es sollte die erste Zeile des Dokuments sein (über '<html>') – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Oh ok, ich dachte, ich musste <! Doctype html> nur in HTML-Dateien, während dies PHP war, wusste ich nicht, musste gesetzt werden. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/8229070/">Takabrycheri</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Es gibt viele, viele Möglichkeiten um dies zu tun. Ein einfacher Weg besteht darin, sicherzustellen, dass der Inhalt über der Fußzeile eine minimale Höhe des gesamten Bildschirms minus der Höhe der Fußzeile aufweist.</p> <pre><code class="prettyprint-override"><div id="content" style="min-height: calc(100vh - 50px);"> Your content goes here. </div> <div id="footer" style="height: 50px"> Your footer goes here. </div> </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/44862344">Quelle</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2017-07-01 15:00:49</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/2304242/">Mika</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Verwandte Themen</div> <ul class="relative_list"> <li> 1. <a href="http://de.voidcc.com/question/p-gqcyagic-ea.html" target="_blank" title="Warum geht meine Fußzeile nicht zum Ende der Seite?"> Warum geht meine Fußzeile nicht zum Ende der Seite? </a> </li> <li> 2. <a href="http://de.voidcc.com/question/p-dgcwiste-cq.html" target="_blank" title="Bootstrap-Fußzeile nicht am Ende der Seite"> Bootstrap-Fußzeile nicht am Ende der Seite </a> </li> <li> 3. <a href="http://de.voidcc.com/question/p-zxnkquvm-dz.html" target="_blank" title="Zeige Fußzeile am Ende der Seite immer"> Zeige Fußzeile am Ende der Seite immer </a> </li> <li> 4. <a href="http://de.voidcc.com/question/p-gbmdgtyi-hq.html" target="_blank" title="Bootstrap Fußzeile am Ende der Seite"> Bootstrap Fußzeile am Ende der Seite </a> </li> <li> 5. <a href="http://de.voidcc.com/question/p-hnjhxmpd-cy.html" target="_blank" title="Fußzeile nicht am Ende der Seite"> Fußzeile nicht am Ende der Seite </a> </li> <li> 6. <a href="http://de.voidcc.com/question/p-cacrjvqi-go.html" target="_blank" title="Fußzeile wird nicht am Ende der Seite"> Fußzeile wird nicht am Ende der Seite </a> </li> <li> 7. <a href="http://de.voidcc.com/question/p-wmycqtgl-p.html" target="_blank" title="CSS Push Div zum Ende der Seite"> CSS Push Div zum Ende der Seite </a> </li> <li> 8. <a href="http://de.voidcc.com/question/p-udauanal-m.html" target="_blank" title="ie7 Problem mit der Fußzeile am Ende der Seite bleiben"> ie7 Problem mit der Fußzeile am Ende der Seite bleiben </a> </li> <li> 9. <a href="http://de.voidcc.com/question/p-mqwkfqwx-dh.html" target="_blank" title="Platzieren Sie Wordpress Fußzeile am Ende der Seite"> Platzieren Sie Wordpress Fußzeile am Ende der Seite </a> </li> <li> 10. <a href="http://de.voidcc.com/question/p-cgwhclsz-bw.html" target="_blank" title="CSS-Fußzeile klebt nicht am Ende der Seite"> CSS-Fußzeile klebt nicht am Ende der Seite </a> </li> <li> 11. <a href="http://de.voidcc.com/question/p-yvocwvtx-kd.html" target="_blank" title="Fußzeile nicht am Ende der Seite nach einem Formular"> Fußzeile nicht am Ende der Seite nach einem Formular </a> </li> <li> 12. <a href="http://de.voidcc.com/question/p-kzbhdqjk-e.html" target="_blank" title="Fußzeile am Ende der Seite in Safari drucken"> Fußzeile am Ende der Seite in Safari drucken </a> </li> <li> 13. <a href="http://de.voidcc.com/question/p-qubpabei-dy.html" target="_blank" title="Fußzeile nicht am Ende der Seite zu bleiben"> Fußzeile nicht am Ende der Seite zu bleiben </a> </li> <li> 14. <a href="http://de.voidcc.com/question/p-etjjxwix-en.html" target="_blank" title="Halten Sie die Fußzeile am Ende der Seite?"> Halten Sie die Fußzeile am Ende der Seite? </a> </li> <li> 15. <a href="http://de.voidcc.com/question/p-qfhagbps-en.html" target="_blank" title="Bootstrap div Strecke bis zum Ende der Seite"> Bootstrap div Strecke bis zum Ende der Seite </a> </li> <li> 16. <a href="http://de.voidcc.com/question/p-mxhbojqe-ev.html" target="_blank" title="Körper erstreckt sich nicht bis zum Ende der Seite?"> Körper erstreckt sich nicht bis zum Ende der Seite? </a> </li> <li> 17. <a href="http://de.voidcc.com/question/p-hxkgucau-d.html" target="_blank" title="jQuery zum Ende der Seite scrollen"> jQuery zum Ende der Seite scrollen </a> </li> <li> 18. <a href="http://de.voidcc.com/question/p-knaksglb-x.html" target="_blank" title="Gurken Capybara zum Ende der Seite scrollen"> Gurken Capybara zum Ende der Seite scrollen </a> </li> <li> 19. <a href="http://de.voidcc.com/question/p-ohdsvejz-bo.html" target="_blank" title="auto scrolling zum Ende der Seite"> auto scrolling zum Ende der Seite </a> </li> <li> 20. <a href="http://de.voidcc.com/question/p-myuuuibg-cr.html" target="_blank" title="Scrollen Sie bis zum Ende der Seite"> Scrollen Sie bis zum Ende der Seite </a> </li> <li> 21. <a href="http://de.voidcc.com/question/p-mdtcokit-cq.html" target="_blank" title="Semantische Benutzeroberfläche Fußzeile am Ende"> Semantische Benutzeroberfläche Fußzeile am Ende </a> </li> <li> 22. <a href="http://de.voidcc.com/question/p-wgjbpfwu-bu.html" target="_blank" title="Attach div Element am Ende der Seite"> Attach div Element am Ende der Seite </a> </li> <li> 23. <a href="http://de.voidcc.com/question/p-dbfinlny-hz.html" target="_blank" title="Stick Inhalt am Ende der Seite"> Stick Inhalt am Ende der Seite </a> </li> <li> 24. <a href="http://de.voidcc.com/question/p-enzrdjbj-kc.html" target="_blank" title="Fußzeile reicht nicht bis zum rechten Rand der Seite"> Fußzeile reicht nicht bis zum rechten Rand der Seite </a> </li> <li> 25. <a href="http://de.voidcc.com/question/p-knrhgmaz-bk.html" target="_blank" title="Fußzeile auf der letzten gedruckten Seite"> Fußzeile auf der letzten gedruckten Seite </a> </li> <li> 26. <a href="http://de.voidcc.com/question/p-cljcrgwf-bt.html" target="_blank" title="anzeigen Fußzeile, wenn am Ende der Seite oder Seite kurz ist sonst"> anzeigen Fußzeile, wenn am Ende der Seite oder Seite kurz ist sonst </a> </li> <li> 27. <a href="http://de.voidcc.com/question/p-adqkamfu-eg.html" target="_blank" title="Fußzeile klebt nicht am Ende der Seite für nur eine Seite"> Fußzeile klebt nicht am Ende der Seite für nur eine Seite </a> </li> <li> 28. <a href="http://de.voidcc.com/question/p-qyhxhihj-h.html" target="_blank" title="Stick-Footer Zum Ende der Seite ohne (unnötige) Bildlaufleisten"> Stick-Footer Zum Ende der Seite ohne (unnötige) Bildlaufleisten </a> </li> <li> 29. <a href="http://de.voidcc.com/question/p-pisorasa-gh.html" target="_blank" title="Wie scrollt man die Seite bis zum Ende (Ende Seite) in der Selen-Webdriver"> Wie scrollt man die Seite bis zum Ende (Ende Seite) in der Selen-Webdriver </a> </li> <li> 30. <a href="http://de.voidcc.com/question/p-gkpwxjmt-by.html" target="_blank" title="Messladezeit der Seite in der Fußzeile"> Messladezeit der Seite in der Fußzeile </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515422091"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- VOIDCC问答侧边栏广告 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Letzte Frage </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://de.voidcc.com/question/p-qkqxptyu-np.html" target="_blank" title="websockets Unterschied zwischen ws.on und ws.onmessage"> websockets Unterschied zwischen ws.on und ws.onmessage </a> </li> <li class="side_article_list_item"> 2. <a href="http://de.voidcc.com/question/p-donuyjnp-nn.html" target="_blank" title="Warum benötigt die Kotlin-Druckanweisung keine Bereichsdefinition?"> Warum benötigt die Kotlin-Druckanweisung keine Bereichsdefinition? </a> </li> <li class="side_article_list_item"> 3. <a href="http://de.voidcc.com/question/p-mjnklezp-nn.html" target="_blank" title="Echo bestimmter Wert von einem Array - PHP cURL"> Echo bestimmter Wert von einem Array - PHP cURL </a> </li> <li class="side_article_list_item"> 4. <a href="http://de.voidcc.com/question/p-mplsylib-nn.html" target="_blank" title="PEM zu PrivateKey"> PEM zu PrivateKey </a> </li> <li class="side_article_list_item"> 5. <a href="http://de.voidcc.com/question/p-ovnmmyly-no.html" target="_blank" title="Overriden Route ID Feld wird zurückgesetzt"> Overriden Route ID Feld wird zurückgesetzt </a> </li> <li class="side_article_list_item"> 6. <a href="http://de.voidcc.com/question/p-njxygaxq-nk.html" target="_blank" title="Saber Entwickler API - Wie begrenzt sind die Daten in der Entwicklung? Verwende ich es falsch oder sind Daten begrenzt?"> Saber Entwickler API - Wie begrenzt sind die Daten in der Entwicklung? Verwende ich es falsch oder sind Daten begrenzt? </a> </li> <li class="side_article_list_item"> 7. <a href="http://de.voidcc.com/question/p-hitrjiyx-nm.html" target="_blank" title="Inkrementieren der Texteingabe bei modaler Rückgabe 1,3,6,10,15"> Inkrementieren der Texteingabe bei modaler Rückgabe 1,3,6,10,15 </a> </li> <li class="side_article_list_item"> 8. <a href="http://de.voidcc.com/question/p-wlitggoi-ne.html" target="_blank" title="Wie hochzuladen und zu kodieren (base64) eine Datei in Webservice mit Jmeter"> Wie hochzuladen und zu kodieren (base64) eine Datei in Webservice mit Jmeter </a> </li> <li class="side_article_list_item"> 9. <a href="http://de.voidcc.com/question/p-usollxcq-na.html" target="_blank" title="Wie kann ich den mobilen Standard-Picker in der React Web App verwenden?"> Wie kann ich den mobilen Standard-Picker in der React Web App verwenden? </a> </li> <li class="side_article_list_item"> 10. <a href="http://de.voidcc.com/question/p-edzeneid-nb.html" target="_blank" title="Split Pandas Spalte Prepending mit tatsächlichen Spaltennamen"> Split Pandas Spalte Prepending mit tatsächlichen Spaltennamen </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Verwandte Themen</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://de.voidcc.com/question/p-gqcyagic-ea.html" target="_blank" title="Warum geht meine Fußzeile nicht zum Ende der Seite?"> Warum geht meine Fußzeile nicht zum Ende der Seite? </a> </li> <li class="side_article_list_item"> 2. <a href="http://de.voidcc.com/question/p-dgcwiste-cq.html" target="_blank" title="Bootstrap-Fußzeile nicht am Ende der Seite"> Bootstrap-Fußzeile nicht am Ende der Seite </a> </li> <li class="side_article_list_item"> 3. <a href="http://de.voidcc.com/question/p-zxnkquvm-dz.html" target="_blank" title="Zeige Fußzeile am Ende der Seite immer"> Zeige Fußzeile am Ende der Seite immer </a> </li> <li class="side_article_list_item"> 4. <a href="http://de.voidcc.com/question/p-gbmdgtyi-hq.html" target="_blank" title="Bootstrap Fußzeile am Ende der Seite"> Bootstrap Fußzeile am Ende der Seite </a> </li> <li class="side_article_list_item"> 5. <a href="http://de.voidcc.com/question/p-hnjhxmpd-cy.html" target="_blank" title="Fußzeile nicht am Ende der Seite"> Fußzeile nicht am Ende der Seite </a> </li> <li class="side_article_list_item"> 6. <a href="http://de.voidcc.com/question/p-cacrjvqi-go.html" target="_blank" title="Fußzeile wird nicht am Ende der Seite"> Fußzeile wird nicht am Ende der Seite </a> </li> <li class="side_article_list_item"> 7. <a href="http://de.voidcc.com/question/p-wmycqtgl-p.html" target="_blank" title="CSS Push Div zum Ende der Seite"> CSS Push Div zum Ende der Seite </a> </li> <li class="side_article_list_item"> 8. <a href="http://de.voidcc.com/question/p-udauanal-m.html" target="_blank" title="ie7 Problem mit der Fußzeile am Ende der Seite bleiben"> ie7 Problem mit der Fußzeile am Ende der Seite bleiben </a> </li> <li class="side_article_list_item"> 9. <a href="http://de.voidcc.com/question/p-mqwkfqwx-dh.html" target="_blank" title="Platzieren Sie Wordpress Fußzeile am Ende der Seite"> Platzieren Sie Wordpress Fußzeile am Ende der Seite </a> </li> <li class="side_article_list_item"> 10. <a href="http://de.voidcc.com/question/p-cgwhclsz-bw.html" target="_blank" title="CSS-Fußzeile klebt nicht am Ende der Seite"> CSS-Fußzeile klebt nicht am Ende der Seite </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div><!-- wrap end--> <!-- footer --> <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://de.voidcc.com/contact">Sprechen Sie uns an</a></li> <li>© 2020 DE.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- / footer --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>