EDIT： ごめんなさい、私は恥ずかしい感じ。私は1年前に似たようなことをしましたが、最初はこの状況に調整することはできないと思いました。どうやらそれはそうだった。
私はすでに他の人が言っていたと思うので、それを絶対に配置して下部にフッターdivを置くことは可能です。問題は、コンテンツdivが大きくなるとその位置を調整することです。フッタは完全に配置されているため、コンテンツdivのフローに従わないため、コンテンツが拡大しても同じ場所に留まります。
このトリックは、絶対配置されたdiv内のすべてをラップすることです。内容が大きくなると展開され、フッターdivはドキュメントの枠の代わりにラッパーの罫線に従って配置されます。
ここにコードがあります。コンテンツのdivに<br />タグの束を入れてみると、すべてが調整されることがわかります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL： は悲しいことに、CSSはこれを行うにはきれいな方法を欠いています。viewportの高さ（hと呼んでいます）がわからないため、h-100-50を計算できません。のフッタのdivの50pxが表示されるようにウェブサイトを構築する必要があります。その方法は、コンテンツdivの最小高さを設定することです。
最小高さの値は、標準のビューポートの高さから派生する必要があります。グーグルLabsは彼らの訪問者のためのビューポートのサイズにそのデータを公表し、ここでの偉大な可視化を行った。 http://browsersize.googlelabs.com/
私は（Googleによると〜80％が、このビューポートの高さを持っている）高620pxである私自身のビューポートのための設計します。したがって、コンテンツdivの最小高さは、620-100-50 = 470ピクセルでなければなりません。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
あなたは、ヘッダーとフッターは関係なく、常にメインのコンテンツがスクロールされたかどうかの、ビューになりたいですか？ –
いいえ、ブラウザの画面に固定する必要はありません！ – stUrb
ジャバスクリプトはどうですか？ – Starx