始终具有 100% 高度内容的 3 行 div答案

【问题标题】：3 row div with 100% height content always始终具有 100% 高度内容的 3 行 div
【发布时间】：2012-06-20 19:53:52
【问题描述】：

我有 3 行 div 布局，页面底部带有页脚，但我需要让内容 div 从页眉到页脚始终全尺寸。在内容 div 中，我还有一个 iframe，我需要让这个 iframe 始终处于 100% 的内容高度，然后在页眉和页脚之间保持 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%;
}

提前感谢

【问题讨论】：

如果我有解决问题的方法，我就不会写了吗？无论如何都是三天，我寻找一个解决方案。如果您想帮助自己，我很感激耐心，否则我真的不明白您的论点，我们在这里询问和帮助灌输。
借口？我问的有什么问题吗？即使我通过谷歌搜索了解决方案，我也不知道该怎么做......但我不应该得到-1。什么样的思维？
他们对你投了反对票，因为你没有说出你的实际问题是什么，你只是发布了代码并说出了你想要的。您的页面上出现了什么问题？到目前为止，您尝试了哪些方法来克服这些问题？
我尝试了一些在互联网上找到的解决方案，例如将页脚固定在底部。容器 div 末尾的 div “clear: both”。我从没想过要列出我做过的几十个测试。在这里，我看到了最平庸的问题，其答案可以毫无问题地创造出来。
我没有给你-1，但@huzzah 解释了我的思考过程。无论如何，我确实发布了一个答案，但我仍然不完全清楚你在寻找什么。

标签： html css

【解决方案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;
}

这会让你上路吗？

【讨论】：

【解决方案2】：

Header, Body, Footer with CSS... 将向您展示如何操作。

但这真的很简单，即使你不知道......

还在 cmets 部分 Elgoog 提供了指向已在此站点上回答的 answer 的链接。

请做你的研究。

【讨论】：

我已经尝试过这个解决方案，但是内容 div（不是容器）的高度仍然小于页眉和页脚之间空间的 100%