html/css/javascriptでのフッター特殊な固定方法について
- ヘッダーとフッターをブラウザの上下に固定する方法をご教授ください
- ヘッダーとフッターを重ならないようにする方法を教えてください
- ヘッダーとフッターの最小値以上でのスクロールバーの設定方法を知りたいです
- ベストアンサー
html?/css?/Javascript? でのフッター特殊な固定方
html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが スクロールした時にスクロールするのは内容のみ。 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。
- buzinesswa
- お礼率42% (50/117)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
見つけたやつでヘッダ、フッタをそれぞれ、固定にして その間の部分をを高さ固定の<div>にしてoverflow:scrollにしては
関連するQ&A
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- 『css/html』フッターを下部＆特殊な移動
こんばんは。 現在Homepageを自分で作成しているのですが 頭が混乱しておりまして・・・、解決策が見つからないのでこちらに質問させていただきました。 結論としましては フッターをある範囲だけ移動(可変)するようにしたい。 現在は ブラウザ上部よりheight：650pxはメインエリアとして情報を記述。 その下にフッター(hright：50px)を配置。 フッターは下部に固定しメインエリアには食い込まない様に設定。 (ブラウザがheight：700px以下になるとスクロールバーが出現しスクロール) ブラウザがheight：700px以上の場合にはメインエリアを延ばして対応。 ここまでの動きはこんな感じです。 http://www.stylish-style.com/csstec/ultimate/sample/fixfoot-sample2.html ここまでは上記のサイト等を調べつつ作成する事が出来たのですがこの後が問題で フッターの最大位置（？）最大下部位置（？）を1000pxに設定し ブラウザが1000px以上になるとフッターの上部は固定され下部が伸びる（若しくは現れる※1） という動作にしたいのですが cssでその様な事が可能なのでしょうか？ 質問文を書くのにも矛盾が生じていると思います。 不可能なら不可能で仕方ないのですが・・・。 何卒、よろしくお願い致します。 ※1. 現れるというのは最初からフッターにheight：500pxくらいの画像を用意し それが見えてくるという意味合いです。
- ベストアンサー
- HTML
- フッターのCSSに関して
フッターのCSSの処理でわからず困っています。 やりたいことは以下の通りです。 １．ブラウザが十分に大きい場合は一番下にフッターを置く。 ２．もしブラウザの大きさが取れない場合はフッターの上の部分の終了後にフッターを置きたい。 フッターはposition: absolute;で指定してあるのでブラウザが十分に大きい場合は問題ないのですが、ブラウザを小さくして最表示した場合にフッター部分がメインの部分のところに被ってしまいます。 出来ればメインコンテンツの下部がフッターの上部より下にある場合はメインコンテンツの下にフッターがくる用に修正したいです。
- ベストアンサー
- CSS
- ヘッダー・フッター固定でコンテンツのみ可変
高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、 （ヘッダー＋コンテンツ＋フッター）の高さの合計＝ウィンドウの高さ が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。 Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。 とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。 ------------------------------- ヘッダー（固定） ------------------------------- コンテンツ（可変） ※この部分のみにスクロールバーが現れることができる。 ------------------------------- フッター（固定） -------------------------------
- 締切済み
- HTML
- HTML5 footer 固定の仕方
ホームページを作っています。 ページはタブで切り替えられるようになっています。 footerを常に表示させたい（画面の下部に固定）と色々やってみましたがうまくいかないので質問します。 <div id="footer"></div> (1)CSS #footer{ position:fixed; } CSSで上のように書いてみました。 文章が少ないときは上に上がり(画面の下に固定されない)、 文章が多くてスクロールが必要なときは、footerが表示されません(要素としては存在しているがつぶれている状態)。 (2)footerFixed.js ページの一番下に表示される（スクロールしないとfooterを見ることが出来ない） という状態です。 なぜなのでしょうか？ 他に方法はないでしょうか？ 教えてください。
- 締切済み
- JavaScript
- css固定したフッターが本文と重なってしまいます
#all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、 ウィンドウを小さくしたり、長い文を書いたりすると、 メインの記事がフッターと重なって読めなくなってしまいます。 記事が短い時は、ページ全体の下部に、 長い時はスクロールした一番下にくるようにしたいです。 テーブルのheight指定を使えば同じような効果は得られますが、 テーブルの無いレイアウトをやってみたかったので。 同じような質問は発見したのですが、いい解答が見つかりませんでした。
- ベストアンサー
- HTML
- 基本的なフッター固定のCSS
フッター固定の基本的なCSSを教えてください。 後、 どこをどうすれば縦幅が決まる どこをどうすれば横幅が決まる フッターの色が決まる 内容はどこに入れたらいい 等も 教えていただけると嬉しいです。
- ベストアンサー
- ホームページ作成ソフト
- フッター固定で余白ができます
footerFixed.js http://blog.webcreativepark.net/2007/11/16-012253.html を使ってhtmlのフッターを下部に固定させてみたところ、コンテンツが少ない量でページの最後にフッターが表示されるようになったのですが、コンテンツがあるコンテナが下部にのびず、背景が見えてしまう状態で尚かつ、コンテンツの最後から妙に大きな空白が開きます。 ブラウザで確認するとウインドウをリサイズすると戻るのですが、原因や対処がまったくわかりません。 どなたかコンテンツをフッターにつけた状態でフッターを下部に表示し、コンテンツが多い場合にはスクロールでフッターが出るようにするにはどのような方法で対応できるでしょうか。どなたかご意見いただければと思います。
- ベストアンサー
- HTML
- 動画を掲載すると最下部のフッターを突き抜ける
CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html
- ベストアンサー
- CSS
- XHTML+CSSでフッターを下部に固定させるには？
http://www.hddx.net/hc2/_index.html ※CSSファイル http://www.hddx.net/hc2/includes/main.css 上記のようなサイトを制作しており、フッター画像をウィンドウサイズに関わらず、下部に固定させようとしています。 下部に固定させ、ウィンドウサイズの変更にも対応できたのですが、 ウィンドウの縦幅をどんどん狭くしていくと、フッター画像が上のコンテンツにかぶっていってしまいます。 http://www.lucky-bag.com/archives/2005/04/footer.html http://www.stylish-style.com/csstec/ultimate/fix-foot.html 上記サイトを参考にしたのですが、どうしてもうまく対応しません。 どなたかお分かりでしたらご教授頂きたいと思います。 宜しくお願い致します。
- 締切済み
- HTML
