在所有浏览器中将包装器高度设置为相等

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

，首先你应该摆脱你的负边距。如果您发现某个浏览器存在布局问题，您可以稍后使用 conditional css 语句来处理该问题你的标题和一个单独的 css 文件。

但要回答你的主要问题。确保始终使用 margin:0;和填充：0；在进行初始布局时。这将在一开始就消除很多布局错误。某些版本的 IE 不符合 Web 标准，因此有时除了解决方法之外您无能为力。 （即条件CSS）

看看为您创建的这个示例页面。
我拿走了你的位置：相对，并添加了浮动和显示属性，以及将正文和#wrapper上的边距和填充更改为零。我还将包装器的宽度从自动更改为 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;
    }