为什么css3 calc不适用于div的高度

Question

我尝试使用calc()将内容的高度设置为100％ - 50px，但它并没有按预期工作。

这是我的fiddle file

我无法弄明白为什么，有人可以帮忙吗？

Answer 1

你还必须为你的html添加100％的高度：

html {height:100%;}

Answer 2

问题是身体边缘，只是零，你应该得到所需的布局：

body {
  height:100%;
  margin:0;
}
html{
  height:100%;
}
#content{
    height: -moz-calc(100% - 50px);
    height: -webkit-calc(100% - 50px);
    height:calc(100% - 50px);
    background:blue;
    overflow-y:scroll;
}
footer {
    position:fixed;
    bottom:0;
    width:50%;
    height:50px;
    
    background-color:green;
}

<div id="content">fsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    afsdfsa
    fsadf
    as
    fas
    df
    asdf
    saf
    <p>this is not last line</p>
    <p>last line</p>
</div>

<footer>
    i am footer
</footer>