javascript - ウェブページに最小高さを置く必要がある

原文 javascript html css

3つのセクションでページを作成したい:


高さが固定のヘッダー
液体のメインセクション
高さが固定のフッター


フッターの下部がウィンドウの下部と面一になるように、ページの高さを最小にしたい。メインセクションの内容が短すぎる場合でも、メインセクションを中央で伸ばしてください。

私はおそらくJavaScriptでこれを行うことができることを知っていますが、もしあればCSSソリューションを使用したいと思います。

次のコードのさまざまなバージョンを試してみましたが、メインセクションはその内容がプッシュする範囲でのみ拡張されています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
    body, header, main, footer {
        width:100%; 
        display:block;
    }
    body{
        display:block;
        position:relative;
        height:100%;
        min-height:100%; 
        padding:0;
        margin:0;
    }
    header{
        background-color:#ccc;
        height:100px;
    }
    footer{
        height:100px;
        background-color:#ccc;
    }
    main {
        border:1px solid #f00;
    }
    #wrapper{
        height:100%;
        min-height:100%;
    }

</style>
</head>
<body>
    <div id="wrapper">
        <header>
            Header
        </header>
        <main>
            Main
        </main>
        <footer>
            Footer
        </footer>
    </div>
</body>
</html>
答え
私はこのようなものがうまくいくと信じています。 Demo

<div class="container-main">
<div class="header">header</div>
<div class="wrapper">
    <div class="container-fluid">
        <div class='one '>one</div>
        <div class='two '>two</div>
        <div class='three '>three</div>
    </div>
</div>
<div class="footer">footer</div>
</div>


CSS:

html, body {
color:#fff;
width:100%;
height:100%;
margin:0;
}
.container-main {
display:table;
width:100%;
height:100%;
box-sizing:border-box;
background:#efefef;
padding:4px;
border:1px solid red;
}
.wrapper {
display:table-row;
height:100%;
}
.container-fluid {
display:table-cell;
padding:10px;
background:#e1e1e3;
border:1px solid blue;
}
.one {
background:#888;
}
.two {
background:#666;
}
.three {
background:#555;
}
.one, .two, .three {
height:80px;
}
.footer {
background:#000;
display:table-row;
}
.header {
background:#000;
display:table-row;
}
関連記事

javascript - React-RouterとMixinsを使用したサーバー側認証

javascript - EmberはPOSTリクエストのJSON応答を取得します

javascript - jqueryを使用して<body>にhtmlコンテンツを設定する方法

javascript - addeventlistenerがGmailのChrome拡張機能でイベントをキャッチしない

javascript - マウスをクリックするたびに、d3で作成した円の色を変更するにはどうすればよいですか?

javascript - フォーム送信前のjQuery検証

javascript - jQueryでオブジェクトのプロパティとして渡されたイベントハンドラーを削除する方法

javascript - HTML5ジオロケーションと別のユーザーのAndroidで位置を取得できません

javascript - レスポンシブレイアウトに基づく固定高さペインの設定

javascript - MVC4ビューでKnockOut JSを使用した2つのViewModelsバインディング