Question

处理整页（＆＃34;锁定＆＃34;）设计。

以下是我与之合作的内容： 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能够填补＆＃34;锁定＆＃34; div，％ - 值;而页脚和导航hade分配了px值。

已经看到了一些针对我的问题的解决方案，但它们似乎都没有效果。试图为每个div设置一个％-value，它可以工作，但正如预期的那样：整个事情会缩小并混淆布局。

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

Answer 2

你可以使用css，display：table propriety！

http://jsfiddle.net/Monteduro/5yex5nfu/5/

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightblue;
    display: table;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding:50px;
}

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

#main {
    height: auto;
    background: lightgreen;
    display:table-row;
}

让#div（％）填写其余的包装div

2 个答案: