-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 に答える