Question

我在页面底部有3行div布局与页脚，但我需要从页眉到页脚的内容div总是全尺寸。在内容div里面我也有一个iframe，我需要让这个iframe总是在100％的conent高度，然后在页眉和页脚之间100％的空间。这是我的（样本）页面：

    <body>
        <div id="container">
            <div id="header">
                    logo
            </div>
            <div id="content">
                <h2 id="appname"><img alt="App" src="/images/b_nextpage.png">&nbsp;Home</h2>
                <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe>
            </div>
            <div id="footer">
                <button name="menu" type="button" id="menuopen"><img alt="App" src="/images/s_process.png">&nbsp;<b>Menu</b>
                </button>
            </div>
        </div>
    </body>

这是我的css：

html, body {
font-family: sans-serif;
padding: 0em;
margin: 0em;
color: #444;
background: #fff;
text-align: center;
height: 100%; /* Important */
width: 100%;
}

#container {
margin: 0px auto;
text-align: center;
height: 100%;
}

感谢提前

Answer 1

将此作为您的标记：

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">
        <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe>
    </div>
    <div id="footer">hi</div>
</div>

这是你的CSS：

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}

#header {
    height: 40px;
    background-color: green;
    color: #fff;
}

#content {
    position:absolute;
    bottom:40px;
    top: 40px;
    width:100%;
    overflow: auto;
    background-color: #333;
    color: #666;
}

#footer {
    height: 40px;
    width:100%;
    position:absolute;
    bottom:0;
    background-color: blue;
    color: #fff;
}

这会让你顺路吗？

Answer 2

此Header, Body, Footer with CSS...会告诉您如何操作。

但实际上这很简单，即使你不知道......

enter image description here

同样在评论部分 Elgoog 已经提供了此网站上已经回复的answer链接。

请做你的研究。

总共有3行div，高度为100％

2 个答案: