Question

我想将我的包装器设置为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;
}

Answer 1

也许这只是错字：

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

Answer 2

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

Answer 3

您的代码没有任何问题。

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

添加

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

对你的CSS来说它会正常工作。

<强> EXAMPLE

Answer 4

呃，是的......看看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的大小，你必须声明它的位置：绝对。清楚的事情很酷但只适用于浮动div。在我的例子中，我有主div（90％高）和页脚div（10％高），不透明度小于1我可以看到条目卡在透明，但当不透明线被删除时，'clear'div消失主红色div后面。

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

背景不起作用的100％高度（尽管html和身高100％）

4 个答案: