css étirer le graal de 2 colonnes pour rencontrer un pied de page

Je suis sûr que c'est une frustration commune - mais j'essaie de faire juste un liquide de deux colonnes avec un pied de page dans les rails. Le problème que j'ai, c'est que je peux obtenir le pied de page à coller sur le fond, ou sur les colonnes. J'utilise ceci pour ma base pour les colonnes, j'ai juste besoin d'eux pour s'étirer au bas de la page, remplissant de couleur !!css étirer le graal de 2 colonnes pour rencontrer un pied de page

La mise en page pour le cadre:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
    <title>Shows: <%= controller.action_name %> </title> 
    <%= stylesheet_link_tag 'frame', 'show' %> 
    </head> 
    <body> 
    <div id="header"> 
    </div> 

    <div class="colmask "> 
     <div class="colleft"> 

     <div class="main"> <!-- The Main window --> 
      <% if flash[:notice] -%> 
      <div id="flash"><%= flash[:notice] %> </div> 
      <% end -%> 
      <%= yield %> 
     </div> 

     <div class="side"> <!-- The Sidebar --> 
      <%= link_to "Home", :controller => :shows, :action => :index %><br/> 
      <br/> 
      Shows<br/> 
      <% Show.all.each do |sh| %> 
      <div class="side_title"> 
       <%= link_to sh.title, show_url(sh) %><br/> 
      </div> 
      <% end %> 
     </div> 
     <div id="push"></div> 
     </div> 
    </div> 
    <div id="footer"> <!-- Put a footer in this panel --> 
     This is where some more information can go... 
    </div> 
    </body> 
</html>

Le CSS - probablement plein de problèmes ... aider à:?

/* 
    Template for layout from 
    http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm 
    Thanks! 
*/ 

html { 
    height: 100%; 
} 

body { 
    margin:0; 
    padding:0; 
    border:0;   /* This removes the border around the viewport in old versions of IE */ 
    width:100%; 
    background:#fff; 
    min-width:600px;  /* Minimum width of layout - remove line if not required */ 
         /* The min-width property does not work in old versions of Internet Explorer */ 
    font-size:90%; 
    height: 100%; 
} 
a { 
    color:#369; 
} 
a:hover { 
    color:#fff; 
    background:#369; 
    text-decoration:none; 
} 
h1, h2, h3 { 
    margin:.8em 0 .2em 0; 
    padding:0; 
} 
p { 
    margin:.4em 0 .8em 0; 
    padding:0; 
} 
img { 
    margin:10px 0 5px; 
} 

/* Header styles */ 
#header { 
    clear:both; 
    float:left; 
    width:100%; 
} 
#header { 
    border-bottom:1px solid #000; 
} 
#header p, 
#header h1, 
#header h2 { 
    padding:.4em 15px 0 15px; 
    margin:0; 
} 
#header ul { 
    clear:left; 
    float:left; 
    width:100%; 
    list-style:none; 
    margin:10px 0 0 0; 
    padding:0; 
} 
#header ul li { 
    display:inline; 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
#header ul li a { 
    display:block; 
    float:left; 
    margin:0 0 0 1px; 
    padding:3px 10px; 
    text-align:center; 
    background:#eee; 
    color:#000; 
    text-decoration:none; 
    position:relative; 
    left:15px; 
    line-height:1.3em; 
} 
#header ul li a:hover { 
    background:#369; 
    color:#fff; 
} 
#header ul li a.active, 
#header ul li a.active:hover { 
    color:#fff; 
    background:#000; 
    font-weight:bold; 
} 
#header ul li a span { 
    display:block; 
} 

/* 'widths' sub menu */ 
#layoutdims { 
    clear:both; 
    background:#eee; 
    border-top:4px solid #000; 
    margin:0; 
    padding:6px 15px !important; 
    text-align:right; 
} 

/* column container */ 
.colmask { 
    position:relative; /* This fixes the IE7 overflow hidden bug */ 
    clear:both; 
    float:left; 
    width:100%;   /* width of whole page */ 
    overflow:hidden;  /* This chops off any overhanging divs */ 

} 
/* common column settings */ 
.colleft { 
    float:left; 
    width:100%; 
    position:relative; 

    min-height: 100%; 
    height: auto; 
    height: 100%; 
    margin: 0 auto -60px; 
} 

.main, 
.side { 
    float:left; 
    position:relative; 
    padding:0 0 1em 0; 
    overflow:hidden; 
} 

/* 2 Column (left menu) settings */ 
.colmask { 
    background:orange;   /* right column background colour */ 
} 
.colmask .colleft { 
    right:75%;   /* right column width */ 
    background:green;  /* left column background colour */ 
} 
.colmask .main { 
    width:71%;   /* right column content width */ 
    left:102%;     /* 100% plus left column left padding */ 
} 
.colmask .side { 
    width:21%;   /* left column content width (column width minus left and right padding) */ 
    left:6%;   /* (right column left and right padding) plus (left column left padding) */ 
} 

#push, #footer { 
    height: 60px; 
    clear: both; 
} 

/* Footer styles */ 
#footer { 
    position:relative; 
    bottom:0; 
    float:left; 
    width:100%; 
    border-top:1px solid #000; 
} 
#footer p { 
    padding:10px; 
    margin:0; 
}

Source

2010-09-21 rybit

est-ce la question? Pouvez-vous fournir plus de détails/exemple de codE? – corroded

solution la plus simple serait, d'ajouter juste une image d'arrière-plan votre emballage

#left_col, #right_col { 
    display: inline; 
    float: left; 
    margin: 0 10px; 
    width: 400px; 
}

<div id="wrapper"> 
    <div id="left_col"> 
    <!--left_col content--> 
    </div><!--/left_col--> 

    <div id="right_col"> 
    <!--right_col content--> 
    </div><!--/right_col--> 
<div style="clear: both"/> 
</div><!--/wrapper->

Si votre code ressemble à ceci, il suffit d'ajouter une image de fond répétitive sur l'axe des y à l'encapsuleur. Pour autant que je sache, c'est la solution qui produira le moins de problèmes.

Source

2010-09-21 02:12:28

Oh, je ne vous ai pas vu ajouté vos échantillons de code en attendant. Prenez-le comme il est. J'espère que cela vous aide encore. –

J'essayais de voir s'il y avait une manière css "pure" - je prévois de réutiliser la mise en page tout le temps. – rybit

Pure css way: positionne le wrapper à position: relatif, positionne la colonne la plus courte à position: absolute; droite: 0; en haut: 0; en bas: 0; (en supposant que la bonne est la barre latérale et est plus courte). Comme je l'ai mentionné, cependant, cela va créer des problèmes sur la route .. Que se passe-t-il si votre bon col est plus grand tout d'un coup par exemple? –

css étirer le graal de 2 colonnes pour rencontrer un pied de page

Répondre

Questions connexes