締切済み

ＩＥ８でのＣＳＳについて

2013/08/29 22:15

formの領域内に可変のdivと固定のdivの領域を指定したいのですがうまくいきません。 ※formの領域が1000pxだとした場合に下のdivが300のため上のdivは残りの700の50%で350pxにしたいです。２つのdivは異なる親タグにしなければならないのでしょか？ <html> <body> <form method="POST" action="" style="height:100%"> <div style="height:50%;background-color:red"></div> <div style="height:300px;background-color:blue"></div> </form> </body> </html>

questionHuman
お礼率1% (1/53)

CSS
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2013/08/31 16:26 回答No.3

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/08/30 10:01 回答No.2

そのHTMLは間違ってますよ。スタイルシートを期待通りに動作させるためには・・【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからメモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator )］より　スタイルシートを書き始めるより先に、まず「Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )」などで文法チェックをして置きましょう. ※formはinline要素ですから、bodyに直接置くことはできません。　またIEは、過去の誤った解釈で作られたIE向けのサイトを表示するために「互換モード」があります。特にwidthやheightの解釈は間違っていますから、他の標準ブラウザと同様に動作するようにDOCTYPEを記述する必要があります。　HTML4.01strictでしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 　になります。　その上で・・・。　ブロック要素は、staticでない直近の親であるコンテナブロックのサイズを参照します。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <body> 　<div class="article"> 　　<form action="./"> 　　　<div class="header"> 　　　</div> 　　　<div class="section"> 　　　　<p>A:<input type="text" name="ABC" value="" tabindex="1" accesskey="A"></p> 　　　　<p><input type="submit" value=" 送信 "></p> 　　　</div> 　　　<div class="footer"> 　　　</div> 　　</form> 　</div> </body> [HTML5] <body> 　<article> 　　<form action="./"> 　　　<header> 　　　</header> 　　　<section> 　　　　<p>A:<input type="text" name="ABC" value="" tabindex="1" accesskey="A"></p> 　　　　<p><input type="submit" value=" 送信 "></p> 　　　</section> 　　　<footer> 　　　</footer> 　　</form> 　</article> </body> html,body{margin:0;padding:0;height:100%;position:relative;} div.article{height:100%;} div.article div.footer{position:fixed;height:300px;bottom:0;} div.article div.section{padding-bottom:300px;}