ne peut pas pousser au fond FOOTER de la page

Je ne suis pas bon dans la conception web, je travaille sur un modèle Web qui a été généré automatiquement par Adobe Dreamweaver.ne peut pas pousser au fond FOOTER de la page

Je veux pousser le footerDIV au bas de la page même si je n'ai aucun contenu sur la page.

Ceci est .CSS (j'ai omis certaines d'entre elles)

body { 
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
    background: #42413C; 
    margin: 0; 
    padding: 0; 
    color: #000; 
} 

.container { 
    width: 960px; 
    background: #FFF; 
    margin: 0 auto; 
} 

.header { 
    background: #ADB96E; 


} 
.sidebar1 { 
    float: left; 
    width: 180px; 
    background: #EADCAE; 
    padding-bottom: 10px; 
} 
.content { 
    padding: 10px 0; 
    width: 780px; 
    float: left; 
} 


/* ~~ The footer ~~ */ 
.footer { 
    padding: 10px 0; 
    background: #CCC49F; 
    position: relative;/* this gives IE6 hasLayout to properly clear */ 
    clear: both; /* this clear property forces the .container to understand where the 
}

Et c'est le balisage commun de mes pages.

<body> 

    <div class="container"> 

     <?php 
    include('templates/header.php'); 
    include_once('templates/sidebar.php'); 
     ?> 
     <div class="content"> 
     <!-- end .content --></div> 
     <div class="footer"> 
      <p>This is a simple footer.</p> 
     <!-- end .footer --></div> 
    <!-- end .container --></div> 
</body>

et pied de page à la page ressemble

enter image description here

J'ai essayé pour footer.

position: fixed; 
bottom: 0; 
width: 100%;

Mais la page ressemble

enter image description here

Source

2014-05-22 Umair

@Lorenzo vous avez volé mes mots! Ceux qui ne savent pas répondre, ils downvote. – Umair

tous les utilisateurs SO sont intelligents – Merlin

@Lorenzo assez intelligent pour appuyer sur downvote – Umair

Voici une solution que je l'utilise, est un HTML 5. Mais cela devrait fonctionner pour vous. Changez juste la classe et vous devriez être bon pour aller.

footer { 
    background: #000; 
    position: absolute; 
    bottom: 0px; 
    display: flex; 
    height: 40px; 
    width: 100%; 
}

Voir Fiddle

vous pouvez également utiliser l'approche de position fixe qui fonctionne tout aussi bien ou mieux

footer { 
    background: #000; 
    position: fixed; 
    bottom: 0px; 
    display: flex; 
    height: 40px; 
    width: 100%; 
}

Source

2014-05-22 04:59:14 Cam

Voir ma question ... Je l'ai déjà essayé FIXES .... mais pas aidé – Umair

Avez-vous regardé le violon ?? – Cam

Oui, il ne vient sur le fond, mais voir la seconde image dans ma question, regardez la couleur de fond du contenu de la page, il est changé – Umair

Vérifiez la DEMO.

Vérifiez les 3 lignes de fond sont responsables de garder le pied de page en bas.

.footer { 
padding: 10px 0; 
background: #CCC49F; 
clear: left; 
/*Below 3 lines are the responsible to keep it at bottom*/ 
position: absolute; 
bottom:0; 
width: 100%; 
}

Source

2014-05-22 05:03:21

vous pouvez essayer

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    html, body { 
     margin:0; 
     padding:0; 
     height:100%; 
    } 
    .container { 
     width: 960px; 
     margin:auto; 
     min-height:100%; 
     position:relative; 
     background: #FFF; 
    } 

    .header { 
      height: 50px; 
     background: #ADB96E; 
    } 

    .sidebar1 { 
     float: left; 
     width: 180px; 
     background: #EADCAE; 
     padding-bottom: 10px; 
    } 
    .content { 
     background:#5ee; 
     padding: 10px 0; 
     width: 780px; 
     float: left; 
    } 
    .content { 
     padding-bottom:80px; /* Height of the footer element */ 
    } 

    .footer { 
     width:100%; 
     height:80px; 
     position:absolute; 
     bottom:0; 
     left:0; 
     background: #CCC49F; 
    } 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="header">   
    </div> 
    <div class="sidebar1">  
    </div> 
    <div class="content">  
    </div> 
    <div class="footer"> 
     <p>This is a simple footer.</p> 
    </div> 
</div> 

</body>

Source

2014-05-22 05:13:52 user3470953

ne peut pas pousser au fond FOOTER de la page

Répondre

Questions connexes