痔になりやすい生活習慣とは?

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

「レスポンシブデザインでネガティブマージン」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

>となっている状態です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を使用するのと同じように
文章構造は無視してもらって構いません。

補足日時:2013/08/28 12:43
    • good
    • 0

普通に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

補足日時:2013/08/27 20:01
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。


人気Q&Aランキング