pied de page en bas avec le contenu chargé ajax

J'ai cette structure html avec la section étant essentiellement mon contenu principal:pied de page en bas avec le contenu chargé ajax

<html> 
 
<head> 
 
<body> 
 
    <nav id="primary"> 
 
    <nav id="secondary"> 
 
    <section id="maincontainer"> 
 
    <div id="main">...</div> 
 
    <footer> 
 
    <div class="footer-inner">...</div> 
 
    </footer> 
 
    </section> 
 
</body> 
 
</html>

Dans le div id « principale » il est contenu dynamiquement chargé via ajax, de sorte que la hauteur peut varier. J'ai besoin que le pied de page soit toujours en bas, même pour les sous-pages avec à peine n'importe quel contenu ne remplissant pas la hauteur de la page. Actuellement, j'ai une position absolue pour le pied de page, qui ne fonctionne pas pour les pages de contenu dynamique, le pied de page est bloqué au milieu du contenu (position de hauteur de la fenêtre d'origine).

Y at-il un moyen de faire ce css seulement? Merci!

Source

2017-05-11 D.Sc.

le pied de page aura un contenu fixe? –

oui, juste quelques liens. –

vérifier ma réponse –

Est-ce que cette

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Vous pouvez également lire sur flex il est pris en charge par tous les navigateurs modernes

Mise à jour: J'ai lu sur le flex et l'ai essayé. Cela a fonctionné pour moi. J'espère qu'il fait la même chose pour vous. Voici comment j'implemented.Here principale est pas l'ID est le <main> div

body { 
    margin: 0; 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

main { 
    display: block; 
    flex: 1 0 auto; 
}

Vous pouvez en savoir plus sur Flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Gardez à l'esprit, il est pas pris en charge par les anciennes versions de IE.

Source

2017-05-11 09:53:16

Je ne veux pas que le pied de page soit visible à tout moment. Il devrait vraiment être tout en bas à la fin, en dessous de tout le contenu. fixe n'a pas m'aider là-bas. –

-1

Méthode 1: Utilisation de la propriété calc() en enveloppant la tête et le contenu dans une div.

body,html{ margin:0px; padding:0px;height:100%} 
 
.wrapper{height:calc(100% - 50px);} 
 

 
footer{ height:50px; background:red;}

<div class="wrapper"> 
 
    <nav id="primary"></nav> 
 
    <nav id="secondary"></nav> 
 
    <section id="maincontainer"> 
 
    <div id="main">...</div> 
 
    </section> 
 
</div> 
 
    <footer> 
 
    <div class="footer-inner">Footer</div> 
 
    </footer>

Méthode 2: En utilisant la hauteur -ve de pied de page avec l'élément d'enveloppe.

body,html{ margin:0px; padding:0px;height:100%} 
 

 

 

 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -50px; 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    height: 50px; 
 
} 
 
.site-footer { 
 
    background: red; 
 
}

<div class="page-wrap"> 
 
    <nav id="primary"></nav> 
 
    <nav id="secondary"></nav> 
 
    <section id="maincontainer"> 
 
    <div id="main">...</div> 
 
    </section> 
 
</div> 
 
    <footer class="site-footer"> 
 
    <div class="footer-inner">Footer</div> 
 
    </footer>

EDIT

Méthode 3: utilisant même structure et calc().

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100% 
 
} 
 

 
#primary { 
 
    height: 50px; 
 
    background: green; 
 
    width: 100%; 
 
} 
 

 
#secondary { 
 
    height: 50px; 
 
    background: yellow; 
 
    width: 100%; 
 
} 
 

 
#maincontainer { 
 
    width: 100%; 
 
    height: calc(100% - 130px); 
 
} 
 

 
#main { 
 
    height: 100%; 
 
} 
 

 
footer { 
 
    background: red; 
 
    height: 30px; 
 
}

<nav id="primary">Nav 1</nav> 
 
    <nav id="secondary">Nav 2</nav> 
 
    <section id="maincontainer"> 
 
    <div id="main">...</div> 
 
    <footer> 
 
    <div class="footer-inner">...</div> 
 
    </footer> 
 
    </section>

Source

2017-05-11 09:51:30

Malheureusement, je ne peux pas changer la structure html, mon pied de page doit être à l'intérieur de la section. –

édité et mis à jour ma réponse avec une troisième option –

La méthode 3 est vraiment proche! Mais à cause du contenu dynamique, la fonction calc() ne connaît pas la hauteur à la fin et calcule mal. –

-1

Utilisation de bottom:0;position:fixed pour le style de pied de page Vous pouvez facilement réaliser ce que vous voulez.

body,html{ margin:0px; padding:0px;height:100%} 
 

 

 

 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -50px; 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height:50px; 
 
} 
 
.site-footer { 
 
    background: red; 
 
}

<div class="page-wrap"> 
 
    <nav id="primary"></nav> 
 
    <nav id="secondary"></nav> 
 
    <section id="maincontainer"> 
 
    <div id="main">...</div> 
 

 
    <footer class="site-footer"> 
 
    <div class="footer-inner">Footer</div> 
 
    </footer> 
 
    </section> 
 
</div>

Hope it helps.

Source

2017-05-11 10:06:42 Chirag

Je ne veux pas que le pied de page soit visible à tout moment. Il devrait vraiment être tout en bas à la fin, en dessous de tout le contenu. fixe n'a pas m'aider là-bas. –

pied de page en bas avec le contenu chargé ajax

Répondre

Questions connexes