レスポンシブデザインでネガティブマージンを使った際

質問

フッターの上の要素（画像=html上はwidth,heightともに指定なし、cssでwidth: 100%; height: auto;）を
ネガティブマージンを使いフッター部分に配置したいと考えてたんですが
フッターの高さを指定しない場合図のようになってしまうので
フッターの高さを指定（#testと同等の高さ）
画面サイズを小さくした際に上手くいきません（小さくした際に#testの高さ ＜ フッターの高さになってしまう）。
フッターの高さを指定しないで#testの高さを梱包できる方法無いでしょうか？

回答No.2

ORUKA1951

＞となっている状態ですorz
　それじゃ、文書構造がめちゃくちゃです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　footer内に画像を表示すると言う事は、その画像は文書構造上もfooter内に、なければなりません。スタイルシートはHTMLやその属性を使用するよりはるかに高度なプレゼンテーション機能を持っていますが、「HTMLの文書構造に反することはしてはならない!!」と明記されています。
<footer>
　<h2>文書情報</h2>
</footer>
footer h2:before{content:url(./images/abc2.jpg);float:left;}
footer{min-height:200px;background-color:yellow;}
footer:after{content:"";display:block;clear:left;}

もし画像があらかじめ入っているなら
<footer>
　<h2><img src="" width="200" height="200" alt="">文書情報</h2>
</footer>
footer h2 img{float:left;}
footer{min-height:200px;}
footer:after{content:"";display:block;clear:left;}

補足

すみません、今回はデザインの為にclearfixを使用するのと同じように
文章構造は無視してもらって構いません。

回答No.1

ORUKA1951

普通にmin-heightを指定したのじゃまずいのですか？？
<footer>
　<h2>文書情報</h2>
</footer>
footer h2:before{
content:url();
float:left;
}
footer{min-height:200px;
}

補足

すみません、質問の仕方が悪かったです。
<div id="test>
<img src="hoge.jpg" alt="hoge" />
</div>
<footer>
<h2>文書情報</h2>
</footer>
となっている状態ですorz