Keep Footer am unteren Rand der Seite mit Serverseite Includes

Ich habe eine Website, die ich erstellen möchte, die mehrere Seiten enthält. Ich verwende serverseitige Includes, um die Header- und Site-Inhaltsleiste auf jeder Seite auszugeben, so dass ich den HTML-Code nicht auf jeder Seite einfügen muss.Keep Footer am unteren Rand der Seite mit Serverseite Includes

Ich kam zu einem Punkt, wo ich eine Fußzeile einbeziehen wollte und mit der Fußzeile auf den unteren Rand der Seite zu erzwingen, und habe viele der Vorschläge auf Stack Overflow ausprobiert und entweder ich vermisse etwas oder etwas anderes ausprobieren müssen.

Es scheint, als ob die Höhe der Hilfe Inhalte (mit JQuery Akkordeon) wird nicht berücksichtigt ...? ... oder ich habe nicht die richtige Formatierung, um die Fußzeile an den unteren Rand der Seite zu schieben anstelle des Bildschirms.

Vielleicht gibt es eine bessere Art zu tun, was ich versuche zu erreichen (ziehen Sie Kopf- und Fußzeile für jede Seite, ohne den HTML-Code kopieren) oder ich vermisse etwas aus dem HTML und/oder CSS.

Eine Beispielseite, die eine Fußleiste enthält, finden Sie unter here.

Probe des HTML Für die oben stehende Seite ist unten ...

<body> 

<div class="page-content"> 

<!--#include file="../../../_includes/header.shtml"--> 

<div class="container"> 
    <h2 class="container-header">About Widget</h2> 
    <div> 
     <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p> 
    </div> 
    <div class="widget-header-figure-container"> 
     <figure> 
      <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget"> 
      <figcaption class="figure-caption">About widget highlighted in red</figcaption> 
     </figure> 
    </div> 
    <div> 
     <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p> 
     <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p> 
    </div> 

</div> 

<footer> 
<!--#include file="../../../_includes/footer.shtml"--> 
</footer> 

</div> 

</body>

Beispiel CSS ist unten:

html { 
    font-size: 62.5%; 
    height: 100%; 
} 

body { 
    background-color: #d2d2d2; 
    font-family: 'Cuprum'; 
    height: 100%; 
} 

.page-content { 
    min-height: 100%; 
    position: relative; 
} 

#footer-container { 
    width: 100%; 
    height: 150px; 
    background-color: #797986; 
    bottom: 0; 
    position: absolute; 
    text-align: center; 
}

Quelle

2017-05-04 boyle.matt

I height von body und html entfernen würde, gelten min-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-box zu .page-content zu Geben Sie ihm stattdessen die Höhe, löschen Sie das schwebende Navi, füllen Sie den Boden auf, um Platz für die Fußzeile zu schaffen, und halten Sie die Polsterung davon ab, die Höhe auf 100vh + 150px zu erweitern. Ich habe auch Ihre footer Selektor in der CSS zu footer anstelle der id geändert, da die id nicht in Ihrem Code ist.

html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    background-color: #d2d2d2; 
 
    font-family: 'Cuprum'; 
 
    margin: 0; 
 
} 
 

 
.page-content { 
 
    min-height: 100vh; 
 
    position: relative; 
 
    overflow: auto; 
 
    padding-bottom: 150px; 
 
    box-sizing: border-box; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: #797986; 
 
    bottom: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
}

<body> 
 

 
<div class="page-content"> 
 

 
<!--#include file="../../../_includes/header.shtml"--> 
 

 
<div class="container"> 
 
    <h2 class="container-header">About Widget</h2> 
 
    <div> 
 
     <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p> 
 
    </div> 
 
    <div class="widget-header-figure-container"> 
 
     <figure> 
 
      <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget"> 
 
      <figcaption class="figure-caption">About widget highlighted in red</figcaption> 
 
     </figure> 
 
    </div> 
 
    <div> 
 
     <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p> 
 
     <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p> 
 
    </div> 
 

 
</div> 
 

 
<footer> 
 
    footer 
 
</footer> 
 

 
</div> 
 

 
</body>

Quelle

2017-05-04 21:40:07

Vielen Dank, die Änderungen an der CSS super funktioniert! Ich bin ziemlich neu in HTML und CSS, nur neugierig, was das Hauptproblem war? –

Definition von 'Höhe: 100%' zu 'html, Körper 'macht tatsächlich die Höhe 100% des Browser-Ansichtsfensters. Normalerweise möchten Sie 'html {height: 100%; } 'und' body {min-height: 100%} 'stattdessen, aber ich finde 'min-height: 100vh' auf einem Inhaltselement funktioniert am besten. Und die schwebende Seitenleiste wurde nicht gelöscht, sodass die Höhe des Elternteils die Höhe der Seitenleiste nicht respektierte. Sehen Sie in "css clearfix" nach, um mehr darüber zu erfahren. –

Keep Footer am unteren Rand der Seite mit Serverseite Includes

Antwort

Verwandte Themen