Comment ajouter un pied de page sur une mise en page responsive?

Je divise deux colonnes sur le dessus. Je veux mettre le pied de page au bas de la page, mais il est également écrasé dans la colonne de droite. J'utilise la mise en page responsive.Comment ajouter un pied de page sur une mise en page responsive?

Voici mon code HTML et CSS:

<html> 
    <head> 
     <meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" media="all" href="css/viewport.css"> 
    </head>  
    <body> 
    <h1>Responsive Two Column Layout (Left Column Fluid)</h1>  
    <div class="columnsContainer">  
     <div class="leftColumn"> 
      <h2>Left Column (fluid)</h2>     
     </div>  
     <div class="rightColumn"> 
      <h2>Right Column</h2> 

      <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p> 
     </div> 
    </div> 
     <div class="columnsContainer">  
     <div class="singleColumn"> 
      <h2>Left Column (fluid)</h2>  
      <p>Bacon ipsum dolor sit amet capicola ball tip beef ribs leberkas, turkey biltong salami shoulder ribeye. Leberkas chuck cow andouille kevin ribeye pork strip steak pork chop beef ribs beef ball tip corned beef. Leberkas prosciutto brisket, short ribs salami cow sirloin chicken. Bacon pork belly bresaola tenderloin biltong leberkas. Strip steak beef leberkas sirloin, venison turkey hamburger kevin. Drumstick chicken ground round t-bone flank fatback jerky ball tip. Jerky ribeye sirloin t-bone.</p>  
       <p>Tongue prosciutto pork ball tip ham hock, meatball sirloin brisket kielbasa biltong doner shoulder bresaola. Chuck beef ribs biltong, kielbasa ground round swine andouille corned beef. Venison hamburger tongue shank. Leberkas doner pork chop sausage kielbasa pancetta, biltong brisket pastrami tenderloin boudin filet mignon sirloin cow meatloaf. Ham ball tip bacon pork belly sirloin.</p>  
       <p>Shoulder pig short ribs, salami chicken venison bresaola. Frankfurter meatball pork chop pork loin, turkey strip steak kielbasa pork belly drumstick shank prosciutto. Pork chicken ground round, sirloin tri-tip ham hock pork chop cow meatloaf pork loin bresaola turkey. Prosciutto hamburger pork short ribs flank tri-tip chicken pig bacon meatloaf t-bone shankle doner. Bresaola doner spare ribs biltong jowl boudin, tri-tip pork leberkas ham hock filet mignon.</p>  
       <p>Leberkas strip steak shoulder meatball, flank biltong shank fatback ball tip swine prosciutto hamburger. Jerky frankfurter drumstick, ham ham hock hamburger kevin kielbasa salami chuck. Flank rump beef cow, beef ribs meatball ball tip jowl bacon pork chop. Biltong tongue pork chop hamburger. Frankfurter tri-tip pancetta pork chop venison t-bone andouille beef ribs salami boudin meatball doner spare ribs. Brisket pork chop pig kielbasa jerky chuck pork belly beef meatball boudin short loin. Doner jerky andouille ham meatloaf prosciutto kevin pork belly short loin pancetta.</p>  
       <p>Corned beef spare ribs hamburger pork tenderloin flank pork loin beef ribs sausage brisket chicken venison bacon short loin sirloin. Ribeye tail short ribs andouille kevin chicken shankle meatloaf, corned beef rump sirloin t-bone chuck tongue. Swine venison tongue, sirloin turducken drumstick bresaola strip steak rump. Kevin ham hock meatball tri-tip. Ground round leberkas pig beef salami strip steak meatball beef ribs. Chicken ball tip rump, short loin bresaola pork t-bone jerky jowl pork chop tail chuck sausage prosciutto.</p> 
     </div> 
    </div>  
    </body> 
</html> 


*, *:before, *:after { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 

body { 
margin: 0; 
background-image:url("..images/bg.jpg"); 
background-repeat:repeat-x; 
} 

.columnsContainer { position: relative; margin: .5em; } 
@media screen and (min-width: 47.5em) { 
     .leftColumn { margin-right: 19.5em; } 

     .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; } 
.singleColumn{width: 100%;} 
    } 

.leftColumn, .rightColumn, .singleColumn { border: 1px solid #ccc; padding: 1.25em; } 

.leftColumn, .singleColumn { margin-bottom: .5em; } 

@media screen and (min-width: 47.5em) { 
    .leftColumn { margin-right: 19.5em; } 
.singleColumn{width: 100%;} 
    .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; } 
}

Source

2014-05-12 user3374790

Où est votre pied de page? – Viscocent

http://jsfiddle.net/tY3cE/ Quelque chose comme ça? – Superdrac

.singleColumn c'est mon pied de page. – user3374790

Avez-vous une raison particulière de mettre votre colonne de droite avec la position absolue? Cela ne me semble pas juste. Et avant d'utiliser les requêtes de médias, vous devez comprendre ce qu'ils sont et ce qui répond. Cela dit ...

.leftColumn, .rightColumn {position:relative; width: 50%; float:left;height: 480px;} 
.singleColumn {position:relative; width: 100%; clear:both;}

Somthing comme cela placerait les deux premières colonnes côte à côte, puis le pied de page à sa place. Si vous avez un positionnement absolu sur un élément, cet élément peut en chevaucher un autre.

Source

2014-05-12 12:15:55

dans le web son fonctionnement, mais dans le mobile son écrasement. colonne droite je suis utiliser twitter updates.it devrait être dans cette position dans le mobile, il devrait venir en deuxième rangée. – user3374790

Comment ajouter un pied de page sur une mise en page responsive?

Répondre

Questions connexes