Pourquoi mon pied de page n'est-il pas affiché en bas? quel est le problème avec ce CSS?

Donc j'aimerais que mon pied de page s'ajuste et reste en bas de la page quelle que soit la hauteur du contenu qui est dynamiquePourquoi mon pied de page n'est-il pas affiché en bas? quel est le problème avec ce CSS?

Voici le CSS pour le corps, l'enveloppe et le pied de page .. le pied de page n'est pas t pas rester dans le fond lorsque le contenu est trop long et se affichage au milieu de la page lorsque vous devez faire défiler

body, html{ 
margin:0px; 
padding:0px; 
width:100%; 
height:100%; 
background:#FFFFFF; 
} 

#wrapper{ 
position:relative; 
top:0px; 
left:0px; 
width:100%; 
padding:0px; 
min-height:100%; 
overflow-x:hidden; 
} 

#footer{ 
position:absolute; 
bottom:0px; 
left:150px; 
width:1600px; 
height:500px; 
background:blue; 
}

...

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="logo"><img src="images/u176.png" class="logo_pic" style="outline: none;"></div> 
     <div id="search_bar"><input type="text" name="search_bar" class="search" /></div> 
      <div id="search_icon"><img src="images/u205.png" width="28px" height="28px" /></div> 
      <div id="become_a_chef"><span id="become_title">Become </span></div> 
       <div id="login">Log in</div> 
       <div id="sign_up">Sign up</div> 
       <div id="tap-container"><img id="tap-pic" class="food_container_pic" src="images/today_menu/u35.png" /></div> 
       <div id="tap-content"></div> 
        <div class="column1"> 
         <div class="tap-links">Become a member</div> 
         <div class="tap-links">Sign up</div> 
         <div class="tap-links">Log in</div> 
         <div class="tap-links">Home</div> 
        </div> 
        <div class="column2"> 
         <div class="tap-links">Search</div> 
         <div class="tap-links">Download the App</div> 
         <div class="tap-links">How it works</div> 
         <div class="tap-links">Help</div> 
        </div> 
        <div id="chef-rating-responsive"> 
        <div class="subinfo_container3"><img class="food_container_pic" src="images/fusion/u1837.jpg" /></div> 
        <div class="subinfo_container4">A</div> 
        <div class="subinfo_container5">Open Now</div> 
        <div class="subinfo_container6">More...</div> 
        </div> 
        <div id="cover_picture_container"><img class="food_container_pic" src="images/u4.jpg" /></div> 
        <div id="profile_picture_container"><img id="profile_picture" class="img" src="<?php echo $picture;?>"></div> 
         <div id="chef_description_container"> 
          <div id="kitchen_name"><span id="kitchen_title"><?php echo $name;?></span></div> 
          <div id="chef_description_summary"><?php echo description;?></div> 
          <div id="schedule_info_container"> 
           <div class="subinfo_container"> 
            <img id="chef_rating" src="images/fusion/u1837.jpg" width="186px" height="35px"> 
            <span id="number_reviews">64 reviews</span> 
           </div> 
           <div class="subinfo_container"><span id="open_now">Open Now</span></div> 
            <div class="subinfo_container"><span id="chef_location">Chef Location</span></div> 
            <div class="subinfo_container2"><span id="letter_grade">A</span><span id="chef_grade">since Nov.2016</span></div> 
            <div class="subinfo_container2"> 
             <div id="clock"><img id="u1341_img" src="images/u1341.png" class="full" ></div> 
             <span id="schedule_hours"></span> 
            </div> 
            <div class="subinfo_container2"><span id="chef_contact">Chef contact</span></div> 
          </div> 
         </div> 
      <div class="today_menu"> 
       <div class="space"></div> 
      </div> 
      <div id="footer"> 
       <div class="company_footer"> 
        <div class="title">Company</div> 
        <div class="column_content_footer">About</div> 
        <div class="column_content_footer">Careers</div> 
        <div class="column_content_footer">Press</div> 
        <div class="column_content_footer">Blog</div> 
        <div class="column_content_footer">About</div> 
        <div class="column_content_footer">Help</div> 
        <div class="column_content_footer">Policies</div> 
        <div class="column_content_footer">Disaster</div> 
        <div class="column_content_footer">Terms & Privacy</div> 
       </div> 
       <div class="discover_footer"> 
        <div class="title">Discover</div> 
        <div class="column_content_footer">Trust & Safety</div> 
        <div class="column_content_footer">Invite friends</div> 
        <div class="column_content_footer">Gift card</div> 
        <div class="column_content_footer">pricks</div> 
        <div class="column_content_footer">Mobile</div> 
        <div class="column_content_footer">Events support</div> 
        <div class="column_content_footer">Travel</div> 
        <div class="column_content_footer">Nearby</div> 
       </div> 
       <div class="kitchening_footer"> 
         <div class="title"></div> 
         <div class="column_content_footer"></div> 
         <div class="column_content_footer">Serving</div> 
         <div class="column_content_footer">Responsible</ 
        </div> 
        <div class="social_media_buttons">Hey</div> 
      </div> 
     </div> 
</div>

Source

2016-02-25 front-end

Vous cherchez quelque chose comme http://ryanfait.com/sticky-footer/ –

Juste un pied de page qui reste sur la toute dernière page de la page, quelle que soit la durée du contenu. La mienne reste en bas quand il n'y a pas de débordement, quand vous n'avez pas à faire défiler la page, mais quand le contenu s'allonge, il y a de l'espace en dessous du pied de page. –

html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #fff; 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-bottom: 400px; 
 
    box-sizing: border-box; 
 
} 
 

 
#footer { 
 
    z-index: 50; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 400px; 
 
    background: blue; 
 
}

<div id="wrapper"> 
 

 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 

 
<div id="footer"> 
 
</div> 
 
</div>

Cela fonctionne parfaitement bien pour moi (un peu tordu). Je vous conseille de ne pas utiliser des largeurs fixes comme 1600px, mais de travailler avec des pourcentages et des largeurs max. Espérons que cela aide

Source

2016-02-25 18:41:49

qui ne fonctionne pas non plus –

Modifié l'extrait. Vérifiez si cela résout votre problème. –

Mon code fonctionne parfaitement sur mon autre site mais sur ce nouveau site, non. bizarre .. essayant toujours de voir .. C'est fondamentalement l'emballage ne s'ajustant pas bien à la hauteur du contenu ... ainsi le pied de page ne sera pas au fond: 0px; –

Si votre pied de page a une hauteur fixe que vous pourriez faire quelque chose comme ceci:

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

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

 
.header { 
 
    background: grey; 
 
} 
 

 
.content { 
 
    /* padding being the same as footer height */ 
 
    padding-bottom: 4em; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 4em; 
 
    background: grey; 
 
}

<div class="force-min-height"> 
 
    <div class="header">Header</div> 
 
    <div class="content"> 
 
     line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line 
 
    </div> 
 
    <div class="footer">Footer</div> 
 
</div>

Source

2016-02-25 18:55:30

Parce que éditer votre commentaire original était trop facile: P –

Je suis nouveau à cela et juste essayer des choses ... (comme: vais-je perdre des points si je supprime une réponse qui a reçu un upvote; - –

Ne vous inquiétez pas, tout va bien: P –

Pourquoi mon pied de page n'est-il pas affiché en bas? quel est le problème avec ce CSS?

Répondre

Questions connexes