背景的 100% 高度不起作用（尽管 html 和正文高度为 100%）答案

【问题标题】：100% height for background not working (despite html and body height 100%)背景的 100% 高度不起作用（尽管 html 和正文高度为 100%）
【发布时间】：2013-10-05 19:03:15
【问题描述】：

我想将包装器设置为 100% 高度。但尽管将高度设置为 100%，但我无法这样做。

目前，我的 main_wrapper 是空的。它应该给我一个红色的背景颜色。

我的目标是在底部使用固定的页脚，但这不是主题。但是，如果有人可以提供固定位置的链接，那就太好了。

<html>
<head runat="server">

</head>
<body class="body">
    <form id="form1" runat="server">
        <div id="main_wrapper">


        </div>

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

    </form>

</body>
</html>



* {
    margin: 0; padding: 0;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.clear {
    clear: both;
}

html {
    margin: 0;
    width: 100%;
    height: 100%;
   /* min-width: 640px; min-height: 480px;*/
}

body {
    margin: 0; /*Top and Bottom 0, Left and Right auto */
    width: 100%;
    height: 100%;
}

    .body #main_wrapper {
        margin: 0;
        width: 100%;
        height: 100%;
        backgroud: #f00;
}

【问题讨论】：

标签： html css height

【解决方案1】：

也许只是错字：

 .body #main_wrapper {
    margin: 0;
    width: 100%;
    height: 100%;
    backgroud: #f00; } <<-- typo

【讨论】：

我尝试了您的代码，并在 main_wrapper 上更改了背景：红色，这对我有用。这是我的代码：#main_wrapper { margin: 0;宽度：100%；高度：100%；背景：红色；我用#main_wrapper 替换了.body #main_wrapper
@elune: 他在form 中使用wrapper 所以应该是#form #main_wrapper
@vishalkin : CMIIIW，但 id 是唯一的，我的意思是当你称他为 #main_wrapper、#form #main_wrapper 或 .body #main_wrapper 时它没有什么不同
嗨，elune 我必须包含#body #form #main_wrapper 吗？通常我总是忽略表单，它仍然有效
没有。正如我所说，id 是唯一的，你可以忽略正文和形式，只需键入#main_wrapper。

【解决方案2】：

    #form1 #main_wrapper {
            margin: 0;
            width: 100%;
            height: 100%;
            background:#f00;
            min-width: 640px; 
       min-height: 480px;
}

【讨论】：

如果你在代码中提供一点背景/解释会更有用。

【解决方案3】：

呃，是的...查看http://jsfiddle.net/5PZcq/2/

#main_wrapper {
    position:absolute;
    margin: 0;
    width: 100%;
    height: 90%;
    background: #f00;
}
#footer {
    position:absolute;
    top:90%;
    height: 10%;
    width: 100%;
    background: blue;
}

我认为这可以捕捉到这里发生的事情。为了用百分比控制 div 的大小，您必须将其声明为 position:absolute。清晰的东西很酷，但仅适用于浮动 div。在我的示例中，我有一个不透明度小于 1 的主 div（90% 高）和一个页脚 div（10% 高）我可以看到条目卡在透明中，但是当不透明度线被移除时，“透明”div 消失在主要的红色 div 后面。

所以问题是，为什么你甚至需要清晰的东西呢？显然，我无法说出您项目的完整范围。这个例子更有意义吗？

【讨论】：

【解决方案4】：

您的代码没有任何问题。

您正在正确设置divs 的高度和宽度，但您忘记了您的 div 位于表单中，而您没有指定高度/宽度。

只需添加

#form1{ width: 100%; height: 100%; }

到你的CSS，它会正常工作。

EXAMPLE

【讨论】：