Altezza 100%

[gervaweb]

GoodWeb

Sto impostando un layout generale da utilizzare su alcuni minisiti.
Ho suddiviso in "bande/linee" il layout (header, content e footer) dove il content può assumere sia l'aspetto orizzontale come verticale.
Ora però mi trovo ad un punto morto ..... :master:
non riesco a fare in modo che il layout occupi tutta l'altezza della pagina del browser

Ho cercato in diversi modi ma nulla .... ho ripreso del vecchio codice funzionante ed applicato la stessa regola, ma nulla.

Chi mi può aiutare?

<div id="main">
   <div class="container">
      <div id="header" class="line">
         <div id="header_top" class="line">Header Line 01</div>
         <div id="header_mid" class="line">Header Line 02</div>
         <div id="header_mnu" class="line">Header Line 03</div>
      <div class="clear"></div>
      </div>
      <div id="content" class="wrapper">
         <div id="content_left" class="line">Content Line 01</div>
         <div id="content_mid" class="line">Content Line 02</div>
         <div id="content_right" class="line">Content Line 03</div>
       <div class="clear"></div>
       </div>
   </div>

<div class="push"></div>
</div>

<div id="footer" class="line">
   <div id="footer_top" class="line">Footer Line 01</div>
   <div id="footer_mid" class="line">Footer Line 02</div>
   <div id="footer_mnu" class="line">Footer Line 03</div>
</div>

/* Reset Style */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
:focus { outline:0; } /* remember to define focus styles! */
ins { text-decoration:none; } del { text-decoration:line-through; } /* remember to highlight inserts somehow! */
table { border-collapse:collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */

/* Define size and base setting of the site */
body { height:100%; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#fff; }

#main { min-height:100%; height:auto !important; height:100%; margin:0 auto -100px; /* negative margin height footer */ }
.wrapper { width:922px; margin:0 auto; padding:10px 0px 10px 0px;}
.line { width:100%; }
.clear { clear:both; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

/* Header line */
#header { background:#ededed; }
#header_top { width:300px; margin:0 auto; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#b0a480; }
#header_mid { width:100%; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#c0a248; }
#header_mnu { width:600px; margin:0 auto; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#edd17c; }


/* Content line */
#content { background:#cc0000; }
/* Content line Horizontal layout */
#content_left { width:300px; margin:0 auto; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#ccc; background-color:#b0a480; }
#content_mid { width:100%; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#ccc; background-color:#c0a248; }
#content_right { width:600px; margin:0 auto; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#ccc; background-color:#edd17c; }
/* Content line Vertical layout */
#content_left { float:left; width:195px; height:350px; margin:0px 5px 5px 0px; padding:10px; color:#333; border:1px solid #ccc; background:#E7DBD5; }
#content_mid { float: left; width:456px; height:350px; margin:0px 5px 5px 0px; padding:10px; color:#333; border:1px solid #ccc; background:#F2F2E6; display:inline; }
#content_right { float:left; width:195px; height:350px; margin:0px 0px 5px 0px; padding:10px; color:#333; border:1px solid #ccc; background:#E7DBD5; }

/* Footer line */
#footer, .push { background:#666;  height: 100px; /* .push must be the same height of the footer */ }
#footer_top { width:300px; margin:0 auto; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#b0a480; }
#footer_mid { width:100%; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#c0a248; }
#footer_mnu { width:600px; margin:0 auto; padding:0px 0px 0px 0px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#edd17c; }

Grazie 1000 per la disponibilità ed interesse.

[Mich_]

Anzitutto controlla di non avere errori di sintassi, sia nell'HTML che nel CSS:
validatore HTML
validatore CSS

Poi dove usi
height: 100%;
devi controllare di avere definito l'altezza nel blocco che lo contiene, altrimenti e` il 100% di una misura non definita.
Ad esempio nel tuo CSS io vedo height:100% nel body, ma non nell'html (e in alcuni browser html e body sono due oggetti distinti).

[gervaweb]

mmmmmmmm

risolto, avevo inserito una classe sbagliata

      </div>
   <div class="clear"></div>
</div>

invece di

      </div>
   <div class="clearfix:after"></div>
</div>

Grazie a tutti