背景无法正常工作的100％高度（尽管HTML和身高100％）

我想将我的包装设置为100％高度。但尽管将高度设置为100％，但我仍无法做到这一点。背景无法正常工作的100％高度（尽管HTML和身高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; 
}

来源

2013-09-30 Benson

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

来源

2013-09-30 02:24:08 vishalkin

如果您使用代码提供一点背景/解释，它会更有用。 – Andrew

也许它只是错字：

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

来源

2013-09-30 01:59:22 elune

嗨，这不是笔误。 – Benson

我试了你的代码，并改变了backround：main_wrapper上的红色，它对我有用。这里是我的代码：#main_wrapper { \t \t margin：0; \t \t宽度：100％; \t \t身高：100％; \t \t背景：红色; } 我取代。体#main_wrapper只有#main_wrapper – elune

@elune：他是用''里面form' wrapper'所以它应该是'#form＃main_wrapper' – vishalkin

呃，是啊...看看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消失主要红色背后。

所以问题是，为什么你甚至需要清楚的东西呢？显然，我不能说出你的项目的全部范围。这个例子更有意义吗？

来源

2013-09-30 02:29:00 zipzit

你的代码没有问题。

您正在设置您的divs高度和宽度，但您忘记了您的div位于表单内，而您并未指定高度/宽度。

只需添加

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

你的CSS，它会正常工作。

EXAMPLE

来源

2013-09-30 02:35:34 Thanos

背景无法正常工作的100％高度（尽管HTML和身高100％）

回答

相关问题