回答受付終了まであと4日　回答を投稿すると知恵コイン15枚が追加されます

CSSを用いた3カラムレイアウトのWebデザインについてなんですが、box1がヘッダー、...

2017/4/3023:18:15

CSSを用いた3カラムレイアウトのWebデザインについてなんですが、box1がヘッダー、box2がコンテンツ、box3が左サブメニュー、box4がフッターの時でbox2のコンテンツ量が少なく、

ページのスクロールがされないページの場合にフッターをページの最下端(画像の赤い位置)に配置するにはどうしたら良いのでしょうか。
使い方が不適切だとは思いますが、「position:absolute;bottom:XXpx;」制御をすると、コンテンツ量が多いページの時にフッターが固定されてしまい位置がおかしくなってしまいます。

コンテンツ量が多い時と少ない時のフッターの位置を適切な位置にする解決法をお教えください。よろしくお願いします。
http://imgur.com/i8WthrD.jpg
知恵袋の画像投稿機能では小さいため、同じ画像をアップロードしました。

html+cssソースはこちらです。
http://www.dotup.org/uploda/www.dotup.org1233275.zip.html
パスワードは3krです。
恐れ入りますが、ダウンロード・解凍をお願いします。

なお、html5を前提に作成していますが、テストのため直線引きに<hr>タグを使用しています。
よろしくお願いします。

補足ソースファイルが消えてしまいましたので、消えない場所に再アップしておきました。
https://www.axfc.net/u/3801975.zip

共感した 0

閲覧数：: 66
回答数：: 1
お礼：: 50枚

違反報告

回答投稿

回答

1〜1件/1件中

カテゴリマスター

lan_atycbさん

2017/5/101:05:44

ソースを見るまでもない．

http://liveweave.com/E5Xdl7

親要素に
position:relative;
min-height:100vh;
padding-bottom:/*フッターの高さ*/;

フッター要素に
position:absolute;
bottom:0;

でOK

違反報告

質問者

yamagutioosimaさん

2017/05/0107:58:10

ご回答ありがとうございます。
親要素っていうのは4つのboxを構成する一番外側の枠だと思うんですが、そこにお教えいただいたのを追加したところ、コンテンツの量が少ない場合(ページスクロールが発生しない場合)は問題ないんですが、
コンテンツ量が多い場合(スクロール発生時)にはフッターがコンテンツの途中に来るようになってしまっています。

どちらの場合にもフッターを一番下側に持っていけるといいのですが…。
http://imgur.com/fzZZPkW.jpg
よろしくお願いします。

違反報告
その他の返信を表示
ロード中です

返信を取り消しますが
よろしいですか?

取り消す
キャンセル

この質問に回答する

「フッター、BOX2」に関する回答受付中の質問

このカテゴリの回答受付中の質問

一覧を見る

この質問につけられたタグ

タグランキングを見る

注目の回答受付中の質問

年上の人を好きになっちゃいました

回答受付中の質問

CSSを用いた3カラムレイアウトのWebデザインについてなんですが、box1がヘッダー、...

回答

「フッター、BOX2」に関する回答受付中の質問

このカテゴリの回答受付中の質問

この質問につけられたタグ

注目の回答受付中の質問

年上の人を好きになっちゃいました

カテゴリQ&Aランキング

総合Q&Aランキング

家族がテレビに翻弄（ほんろう）されています

Yahoo!知恵袋カテゴリ