[css]#mainのdivが伸びたら#footerも伸ばしたい

Question

mainのほうにデータが増えると

mainの高さをそのデータ分増やしたいです。
それは勝手にできましたが、footerを超えるまで伸びてしまいましたので

#main or #contentsが伸びたら
その分、#footerも位置もそれに合わせて下がってほしいです。

このようにするにはcssでどのように書けばよろしいですか。

#footerは#contentsに依存（？）するみたいな設定があれば教えていただけますか。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/jsなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[退会済みユーザー]

なんとなくだけど　DHTMLはもう古いですよ?

Answer 1

ちゃんとしたCSSを書けていればやりたいことは通常自動的に実現できることです。
それができないということは、どこかにおかしな設定があるということです。
ただそれが具体的にどこであるのかは、実際に書かれた現状のコードを見てみないと
ちゃんとしたことは言えません。

今のところ私が疑っているのは、
・#menuLと#mainがfloatによって横並びレイアウトされており、#contentsにclearfixを設定していない
という状況です。
もしそうであれば、

#contents::after {
  content:"";
  display: block;
  clear:both;
}

これを追加すれば、希望通りコンテンツが伸びればその分#footerも押し下げられるようになると思います。
ただしこれはあくまで想像です。何度も言いますが正確なことは実際のコードを見ないと判断できません。
コードの追記をされると良いと思います。

Answer 2

ソースが載ってないので、どこをどうしたら等のアドバイスはできませんので、良い方法として
Skeleton CSS やbootstrap.cssにはこういった段組を組みやすいようなつくりになっています。

そういったcssのレイアウトに関する部分のコードを拝借・応用するのがよろしいかと、、そういったコードは洗練されてますよw