-7

我有 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%;
}

提前感谢

4

2 回答 2

2

使用它作为您的标记：

<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;
}

这会让你上路吗？

于 2012-06-20T20:38:43.337 回答
0

这个带有 CSS 的页眉、正文、页脚......将向您展示如何操作。

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

在此处输入图像描述

同样在评论部分，Elgoog提供了一个链接，指向该网站上已经回答的答案。

请做你的研究。

于 2012-06-20T20:33:15.723 回答