Sticky footer responsive

Par Youtaka, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Je cherche à coller au bas de ma page mon footer (sans qu'il ne soit en position fixed) peu importe le contenu sur la page.

J'ai pu trouver pas mal de moyens afin de le faire, cependant ils ne fonctionnent que lorsque le footer a une taille fixe (150px par exemple).

Le problème ici, est que mon footer est à base de colonnes Bootstrap, il n'a donc pas de taille fixe.

J'ai eu beau essayer ce genre de chose :

.content { position : relative; } footer { position : absolute; bottom : 0; left : 0; right : 0; }

Je ne sais donc pas s'il est possible de le faire directement en CSS, ou s'il faut passer par du JS afin de récupérer la height variable du footer ?

En vous remerciant d'avance !

5 réponses

ZsasZ99, il y a 10 ans

Bonjour,

Alors supposant que tu as ce code :

<div class="container"> <header>Hello i am a header</header> <div class="content"> Hello there i am the content container </div> <footer>and i am the footer</footer> </div>

tu va lui appliquer ce css pour fixer ton footer en bas

.container { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; }

plus besoin de préciser la hauteur de ton footer. J’espère que sa te convient :)

Youtaka, il y a 10 ans

Hello,

J'ai testé le code que AnArchie999 a mis, seulement ça ne fait rien du tout... ^^

Voici comment est organisé mon HTML :

<div class="container-fluid"> <div class='header'> <div class='head'> <i class="fa open-menu fa-bars fa-3x" aria-hidden="true"></i> <img src='img/logo.png' alt='logo' id='logo-mobile' /> <div class='professor'> <h4>Salahuddin Muhammad Salim Zabir, PhD</h4> <p>Professor, Senior Member, IEEE</p> </div> <img src='img/pic1.png' alt='pic' id='pic'/> </div> </div> <!-- Change the language of the page (Right bottom of the page) --> <nav class="navbar navbar-fixed-bottom nav-language"> <ul class="nav navbar-nav navbar-right ul-language"> <li> <a id="trad" href="?lang=<?php if($lang == "jp") echo "en"; else echo "jp"; ?>"><img src="img/<?php if($lang == "jp") echo "en"; else echo "jp"; ?>.png" class="img-responsive img-circle" alt=""></a> </li> </ul> </nav> <nav class='menu'> <img id='logo' src='img/logo3.png' alt='logo' /> <ul> <i class='fa fa-bars fa-3x close-menu' aria-hidden='true'></i><li class='nav-menu'>Menu</li> <li class='home'><?php if($lang == "en") echo "Home"; else echo "Home"; ?></li> <li class='research'><?php if($lang == "en") echo "Research"; else echo "研究"; ?></li> <li class='publications'><?php if($lang == "en") echo "Publications"; else echo "学術論文"; ?></li> <li class='teaching'><?php if($lang == "en") echo "Teaching"; else echo "教育"; ?></li> <li class='professionnal_activities'><?php if($lang == "en") echo "Professional Activities"; else echo "専門分野における活動"; ?></li> <li class='useful_links'><?php if($lang == "en") echo "Useful Links"; else echo "関連リンク"; ?></li> <li class='network'><?php if($lang == "en") echo "Network & ICT Applications Lab"; else echo "ネットワーク＆ICTアプリケーション研究室"; ?></li> </ul> </nav> <div class="row"> <div class="content col-lg-9 col-md-8 col-sm-9"> <!-- HOME PAGE --> <div id="home"> <h1>Home</h1> <?php readText("data/".$lang."/home.txt"); ?> </div> <!-- RESEARCH PAGE --> <div id="research"> <h1><?php if($lang == "en") echo "Research"; else echo "研究テーマ"; ?></h1> <?php if($lang == "en") echo "<p>My major research themes include the following : </p>";?> <ul> <li class="computer_networks_network_protocols"><?php if($lang == "en") echo "Computer networks/network protocols"; else echo "情報ネットワーク・ネットワークプロトコル"; ?></li> <li class="disaster_resilient_network"><?php if($lang == "en") echo "Disaster resilient network"; else echo "災害に強いネットワークの構築"; ?></li> <li class="ict_services_for_seniors"><?php if($lang == "en") echo "ICT services for seniors"; else echo "高齢者向けのICT技術やサービス"; ?></li> <ul> <li class="remote_assistance_for_accessing_ict_services"><?php if($lang == "en") echo "remote assistance for accessing ICT services"; else echo "ICT技術を使用するための遠隔アシスタンス"; ?></li> <li class="shared_calendar"><?php if($lang == "en") echo "shared calendar"; else echo "共有カレンダー"; ?></li> </ul> <li class="e_health_wellness">E-health/Wellness</li> <li class="iot_in_everyday_life_and_big_data"><?php if($lang == "en") echo "IoT in everyday life & big data"; else echo "IoT＆ビッグデータ"; ?></li> <li class="ict_in_agriculture"><?php if($lang == "en") echo "ICT in agriculture"; else echo "農業ICT（スマート農業)"; ?></li> <li class="ict_technologies_for_emerging"><?php if($lang == "en") echo "ICT technologies for emerging"; else echo "途上国向けのICT技術やサービス"; ?></li> </ul> <div id="computer_networks_network_protocols"> <?php readList("data/".$lang."/research/computer_networks_network_protocols.txt"); ?> </div> <div id="disaster_resilient_network"> <?php readList("data/".$lang."/research/disaster_resilient_network.txt"); ?> </div> <div id="ict_services_for_seniors"> <div id="remote_assistance_for_accessing_ict_services"> <?php readList("data/".$lang."/research/ict_services_for_seniors/remote_assistance_for_accessing_ict_services.txt"); ?> </div> <div id="shared_calendar"> <?php readList("data/".$lang."/research/ict_services_for_seniors/shared_calendar.txt"); ?> </div> </div> <div id="e_health_wellness"> <?php readList("data/".$lang."/research/e_health_wellness.txt"); ?> </div> <div id="iot_in_everyday_life_and_big_data"> <?php readList("data/".$lang."/research/iot_in_everyday_life_and_big_data.txt"); ?> </div> <div id="ict_in_agriculture"> <?php readList("data/".$lang."/research/ict_in_agriculture.txt"); ?> </div> <div id="ict_technologies_for_emerging"> <?php readList("data/".$lang."/research/ict_technologies_for_emerging.txt"); ?> </div> </div> <!-- PUBLICATIONS PAGE --> <div id="publications"> <h1><?php if($lang == "en") echo "Publications"; else echo "学術論文"; ?></h1> <div class='all-buttons'> <button class="journals sous-menu"><?php if($lang == "en") echo "Journals"; else echo "学術雑誌"; ?></button> <button class="international_conferences sous-menu"><?php if($lang == "en") echo "International conferences"; else echo "国際会議論文誌"; ?></button> <button class="national_conferences_workshops_etc sous-menu"><?php if($lang == "en") echo "National conferences, workshops etc."; else echo "国内学会、ワークショップなどでの発表"; ?></button> </div> <div id="journals"> <?php readList("data/".$lang."/publications/journals.txt"); ?> </div> <div id="international_conferences"> <?php readList("data/".$lang."/publications/international_conferences.txt"); ?> </div> <div id="national_conferences_workshops_etc"> <?php readList("data/".$lang."/publications/national_conferences_workshops_etc.txt"); ?> </div> </div> <!-- TEACHING PAGE --> <div id="teaching"> <h1><?php if($lang == "en") echo "Teaching"; else echo "教育"; ?></h1> <?php if($lang == "en") echo "<p>At National Institute of Technology, Tsuruoka College (NITTC), I conduct the following courses :</p>"; else echo "<p>現在、鶴岡高専で私は下記の授業を担当しています。</p>"; ?> <?php readList("data/".$lang."/teaching.txt"); ?> </div> <!-- PROFESSIONAL_ACTIVITIES PAGE --> <div id="professional_activities"> <h1>Professional Activities</h1> <div class='all-buttons'> <button class="editorial_board_of_journals_etc sous-menu">Editorial board of journals etc.</button> <button class="international_conference_program_committee sous-menu">International conference program committee</button> </div> <div id="editorial_board_of_journals_etc"> <?php readList("data/".$lang."/professional_activities/editorial_board_of_journals_etc.txt"); ?> </div> <div id="international_conference_program_committee"> <?php readList("data/".$lang."/professional_activities/international_conference_program_committee.txt"); ?> </div> </div> <!-- USEFUL_LINKS PAGE --> <div id="useful_links"> <h1>Useful Links</h1> <?php readList("data/".$lang."/useful_links.txt"); ?> </div> </div> </div> <footer class='footer'> <div class='row'> <div class='col-md-4'> <p> <i class="fa fa-at fa-3x" aria-hidden="true"></i><br /> <a class='mail' href="mailto:szabir@tsuruoka-nct.ac.jp">szabir@tsuruoka-nct.ac.jp</a> </p> </div> <div class='col-md-4'> <i class="fa fa-home fa-3x" aria-hidden="true"></i> <p> Department of Creative Engineering<br/> National Institute of Technology, Tsuruoka College<br/> 104 Sawada, Inooka, Tsuruoka,<br/> Yamagata 997-8511, Japan </p> </div> <div class='col-md-4'> <p> <i class="fa fa-phone fa-3x" aria-hidden="true"></i><br /> +81-235-25-9062, +81-80-3132-3984 </p> </div> </div> </footer> </div>

Je ne vois pas trop comment faire là... :/

ZsasZ99, il y a 10 ans

Bonjour,

Ajoute la class "content" a la div qui a la class "row" au lieu de la div avec la class "col-md-9".

Youtaka, il y a 10 ans

Ah ça fonctionne en effet, merci beaucoup pour votre aide ! :)