ページテンプレートに記述したdiv要素がフッターを突き抜ける

  • kamiy

    (@kamiy)


    15年、 8ヶ月前

    ページテンプレートやカスタムテンプレートに、最新ニュースなどを出力させるためのｐｈｐ文を書いててdiv要素で囲っています。それをスタイルシートでpositionプロパティで絶対配置してやろうとしました。
    １つのページテンプレートにdiv要素を３つ作成したところ、出力された画面の表示でそれらがフッターの下を突き抜けてしまいました。
    これがまともにフッターより上に納まるにはどうすれば宜しいのでしょうか。お分かりの方、ご教授いただければ大変ありがたいです。
    テーマはデフォルトを使用しておりますが、他のテーマ数点でもこういう症状になりました。
    ※ちなみに、php文をexec phpというプラグインで直接に記事投稿欄で記入すればこうした問題がおこらなかったのですが、どうにも安定性が悪くてすぐにコーディングが狂うため、以上のような方法で対処しようとしました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • jim912

    (@jim912)

    15年、 8ヶ月前

    kamiyさん、こんにちは。

    フッターを突き抜けるというのであれば、表示の問題なので、phpは関連度が低く、htmlの構造か、CSSの指定の仕方が問題なのでしょう。

    まずは、htmlの入れ子構造が正しいか（閉じタグはが多かったり少なかったりしないか）を確認してください。
    おかしいようであれば、まずはそこの修正からです。

    正しいのならCSSの指定を見直してください。
    position: absoluteだと内包要素の高さは親要素に反映されませんから、双方ともに高さを決めてしまうか、そもそも絶対配置ではない方法で表示させるかになります。

    トピック投稿者 kamiy

    (@kamiy)

    15年、 6ヶ月前

    jim912さん
    お返事遅くなりまして申し訳ありません。ご示唆いただきありがとうございました！
    高さを決めてしまう方法は、追加更新のないページ固定的なページだけで構成するのであれば確かにいいですね。しかしブログなどを書き続けるので、この方法はあきらめました。。。とりあえずfloatで間に合わせております。
    複雑なレイアウトを崩れにくく構築したいのでposition:absoluteを使ってみたかったのですが、フッター問題の解決が難しいですね。
    ちなみにInmanのポジションクリア手法というもので解決できる（http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute)というのをWebデザインプロフェッショナルワークフローという本で見ました。javascriptを使うようですが、試したものの私には難しくてどうもうまく行きませんでした。。。

    shokun0803

    (@shokun0803)

    15年、 6ヶ月前

    ええと。全てのブラウザに対応と言うわけにはいきませんが、比較的新しいブラウザ向けの方法論でいけば、inline-blockという方法もあります。
    複雑な構成をcssで実現したい場合の新たな方法なのかもしれませんが、全てのブラウザに対応できません。そこを理解したうえでなら。

    参考です。
    http://www.google.com/search?hl=ja&source=hp&fkt=1091&fsdt=5686&q=css+inline-block&lr=&rlz=1R2TRDJ_jaJP327&aq=f&oq=&aqi=g2

    KKT

    (@kvex)

    15年、 6ヶ月前

    absolute でやってるってことは、それだと解決しずらいですね。
    absolute を使うのであれば可変長のボックス内には、向かないと思います。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ページテンプレートに記述したdiv要素がフッターを突き抜ける」には新たに返信することはできません。