html - 使 #div (%) 填充包装器 div 的其余部分

Question

致力于整页(“锁定”)设计。

这是我正在使用的: http://jsfiddle.net/5yex5nfu/

<div id="wrapper">
    <div id="navigation">
        Nav
    </div>
    <div id="main">
        Main
    </div>
    <div id="footer">
        Footer
    </div>
</div>

body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#wrapper {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px;
    margin-bottom:50px;
    margin-right:50px;
    margin-left:50px;
    background-color: lightblue;
}

#navigation, #footer {
    width: 100%;
    height: 70px;
    background: pink;
}

#main {
    height: auto;
    background: lightgreen;
}

我希望主 div 填充“锁定”div 的其余部分，并使用 %-value；而页脚和导航已分配 px 值。

针对我的问题已经看到了一些解决方案，但它们似乎都不起作用。已尝试为每个 div 设置一个 % 值，它起作用了，但正如预期的那样:整个事情缩放并弄乱了布局。

Answer 1

对于纯 css 解决方案，您可以使用 calc 来计算 main 的高度

示例 http://jsfiddle.net/5yex5nfu/2/

只需将#main height 从 auto 更改为这个

#main {
    height: calc(100% - 140px);
}

阅读更多关于 calc 的信息和 a-couple-of-use-cases-for-calc