すべてのブラウザでラッパーの高さを設定する

Question

ラッパーがあり、すべてのブラウザーで同じ高さに設定する必要があります。

どうすればよいですか？ 実際、私はmin-heightとheight：100％を使って試してみましたが、動作しません。

これは、それが実際には別のブラウザで様子を示している。ここで

は私のCSSです：

body 
{ 
    background: #99CCFF; 
    margin: 20px 0; 
    padding: 0; 
    width: 100%; 
} 

    #wrapper 
{ 
    position: relative; 
    margin:-20px auto; 
    width:auto; 
    height:450px; 
    background-image: url('../images/bg.jpg'); 
    background-repeat: repeat; 
}  

Answer 1

@Kiran

あなたはすべての最初の、あなたの負のマージンを取り除く必要があります。 1つのブラウザにレイアウトの問題がある場合は、後でヘッダ内のconditional css文と別のCSSファイルを使用して対応できます。

しかし、あなたの主な質問に答えてください。必ずマージンを使用してください：0;パディング：0;最初のレイアウトを行うときに。これは最初から多くのレイアウトバグを取り除くでしょう。 IEの一部のバージョンはWeb標準に準拠していないため、回避策以外には時々行うことはあまりありません。 （条件付きCSS）

作成したサンプルページをご覧ください。 私はposition：relativeを取り去り、floatとdisplayプロパティを追加しました。また、ボトムボディと#wrapperのマージンとパディングをゼロに変更しました。また、ラッパーの幅をautoから100％に変更しました。

http://www.albatrossfonts.com/heightcss/wrapperHeight.html

私はあなたのイメージへのアクセス権を持っていないので、私は、同様のラッパーの背景色として白を使用。

は、ここでは、コードです：

body 
{ 
    background: #99CCFF; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

#wrapper 
{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 450px; 
    display: block; 
    float: left; 
    background-image: url('../images/bg.jpg'); 
    background-repeat: repeat; 
    background-color: #ffffff; 
} 

Answer 2

使用CSSは、各ブラウザが異なり、パディング、マージンおよびその他のプロパティを扱うhttp://meyerweb.com/eric/tools/css/reset/をリセットします。

/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126 
     License: none (public domain) 
    */ 

    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, 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, 
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, 
    time, mark, audio, video { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 
    /* HTML5 display-role reset for older browsers */ 
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section { 
     display: block; 
    } 
    body { 
     line-height: 1; 
    } 
    ol, ul { 
     list-style: none; 
    } 
    blockquote, q { 
     quotes: none; 
    } 
    blockquote:before, blockquote:after, 
    q:before, q:after { 
     content: ''; 
     content: none; 
    } 
    table { 
     border-collapse: collapse; 
     border-spacing: 0; 
    }