2

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

4 回答 4

1

也许这只是错字：

 .body #main_wrapper {
    margin: 0;
    width: 100%;
    height: 100%;
    backgroud: #f00; } <<-- typo
于 2013-09-30T01:59:22.663 回答
1

您的代码没有任何问题。

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

只需添加

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

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

例子

于 2013-09-30T02:35:34.473 回答
1 
    #form1 #main_wrapper {
            margin: 0;
            width: 100%;
            height: 100%;
            background:#f00;
            min-width: 640px; 
       min-height: 480px;
}
于 2013-09-30T02:24:08.373 回答
0

呃，是的......看看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 后面。

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

于 2013-09-30T02:29:00.823 回答