Conserver le pied de page au bas de la page à l'aide du côté serveur Inclut

J'ai un site que j'essaie de créer et qui comprend plusieurs pages. J'utilise le côté serveur inclus pour vider dans la barre d'en-tête et le contenu du site sur chaque page afin que je n'aie pas à inclure le code HTML dans chaque page.Conserver le pied de page au bas de la page à l'aide du côté serveur Inclut

Je suis arrivé à un point où je voulais inclure un pied de page et j'ai du mal à forcer le pied de page vers le bas de la page, et j'ai essayé beaucoup de suggestions trouvées sur Stack Overflow et il me manque quelque chose ou besoin d'essayer quelque chose de différent.

Il semble que la hauteur du contenu de l'aide (en utilisant l'accordéon JQuery) ne soit pas prise en compte ...? ... ou que je n'ai pas la bonne mise en forme pour repousser le bas de la page au lieu de l'écran. Peut-être qu'il y a une meilleure façon de faire ce que j'essaye d'accomplir (tirer en-tête et pied de page pour chaque page sans avoir à copier le HTML) ou il me manque quelque chose du HTML et/ou CSS.

Un exemple de page comprenant une barre de pied peut être trouvé here.

échantillon du code HTML de la page ci-dessus est en dessous ...

<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>

Sample CSS est ci-dessous:

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; 
}

Source

2017-05-04 boyle.matt

Je supprimerait height de body et html, appliquer min-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-box à .page-content à donnez-lui la hauteur à la place, effacez la navigation flottante, remplissez le fond pour faire de la place pour le pied de page, et gardez ce rembourrage d'étendre la hauteur à 100vh + 150px. J'ai également changé votre sélecteur footer dans le CSS à footer au lieu du id puisque le id n'est pas dans votre code.

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>

Source

2017-05-04 21:40:07

Merci beaucoup, les changements apportés à la CSS fonctionnait très bien! Je suis assez nouveau en HTML et CSS, juste curieux de savoir quel était le problème principal? –

définir 'height: 100%' à 'html, body' fait en fait la hauteur 100% de la fenêtre d'affichage du navigateur. Vous voulez généralement utiliser 'html {height: 100%; } 'et' body {min-height: 100%} 'à la place, mais je trouve que l'utilisation de' min-height: 100vh' sur un élément de contenu fonctionne mieux. Et la barre latérale flottante n'a pas été effacée de sorte que la hauteur du parent n'a pas respecté la hauteur de la barre latérale. Regardez dans "css clearfix" pour en savoir plus à ce sujet. –

Conserver le pied de page au bas de la page à l'aide du côté serveur Inclut

Répondre

Questions connexes