4

わかりました。まず、IE7 までサポートしているので、ボックスのサイズ変更はありません。

ウィンドウの上部と下部にそれぞれ固定サイズのヘッダーとフッター (それぞれ 80px など) を配置しました。

ウィンドウのサイズに関係なく、間にあるすべてのスペースを div で占めたいと思います。JavaScript で簡単ですが、CSS だけでそれを行う方法はありますか?

4

2 に答える 2

1

http://jsfiddle.net/ZLrPF/ James Dean スティッキー フッターhttp://mystrd.at/modern-clean-css-sticky-footerに基づいています。IE7 にはもう少し工夫が必要ですが、それは可能です。

編集：

これは、要求どおりに機能する IE7+ ソリューションです。

html {
    height: 100%;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: table;
}
#header-wrapper, #content-wrapper, #footer-wrapper {
    display: table-row;
}
#header, #content, #footer {
    display: table-cell;
}
#header, #footer {
    height: 80px;
    background-color: orange;
}
#content {
    background-color: green;
}

<body>
    <div id="header-wrapper">
        <div id="header">header</div>
    </div>

    <div id="content-wrapper">
        <div id="content">content</div>
    </div>

    <div id="footer-wrapper">
        <div id="footer">footer</div>
    </div>
</body>
于 2012-03-30T15:59:41.813 に答える
0

固定フッターを使用する必要があります。例： http: //ryanfait.com/sticky-footer/

于 2012-03-30T15:46:03.633 に答える