ホームページ > 記事 > ウェブフロントエンド > 高さ 100% 問題_html/css_WEB-ITnose
高さ 100% 問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:281144ブラウズ
ドキュメントモードを宣言した後、IE での次のコードの高さは 100% 無効になります。
1. ヘッダーでコメントされたメソッドを使用しないでください。
2. 指定された高さを使用しないでください。
何か良い方法はありますか？ヘルプ！
3d34c108ace102fae407d972378b3621
93f0f5c25f18dab9d176bd4f6de5d30e
18cfe77feebda4badfd96695c68a82af-->
b2386ffb911b14667cb8f0f91ea547a7無題ページ9c3bca370b5104690d9ef395f2c5f8d1
4e8912ede76f05f92d7974e1ad225174 >
d3a57fffda62c78b6d334f335c16cc3f
9745d1adfdcb7827561cbb8df4d0eef74b98ed942906e0e74ef1b0ba7dc95d6d
42b66e0d0835ab3509ca153ea70b990c ;TD style="border-left:2px ソリッドレッド">028c8978a801aab69fbfabf6c40af099
42b66e0d0835ab3509ca153ea70b990c vAlign=middle>
028c8978a801aab69fbfabf6c40af099
028c8978a801aab69fbfabf6c40af099
。
html,body{height:100%;} これを試してみましたが、うまくいきませんでした。
IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html
html,body{height:100%;} これ実験しましたが、役に立ちませんでした。
html,body{height:100%;} これを試しましたが、うまくいきませんでした。
IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html2 番目の方法は機能しますが、質問したときに事前に述べました. は、指定された固定高さを採用せず、既存のコード構造を破壊することはできません (doctype 宣言を削除します)。
最初の方法は質問とは異なります。質問はテーブルであり、td は行をまたがっています。この方法を試してもうまくいきませんでした。
ああ、height:100% は必要ありません。この属性は親が高さを定義する場合にのみ有効です
ああ、この属性は親が高さを定義する場合にのみ有効です
:50% にしてから、コンテンツ ブロックの高さに合わせて Write margin-top を使用します。 - コンテンツ ブロックの高さ 1/2
2 行目のコンテンツは可変であり、多くのコンテンツが存在します。このようなテーブル。 実際、私が実現したい機能は非常に単純で、複数の TABLE の td に異なる色の 2 本の左境界線を追加することです。 1つだけあれば手間が省けます。
html,body{height:100%;}
html,body{height:100%;} td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue} <!DOCTYPE html><html><head><title>无标题页</title><style type="text/css">/*CSS3 nth-child() 选择器*/td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}</style><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script type="text/javascript">/*$(document).ready(function(){ $("#mytable").find("td").css("border-left", "2px solid red"); $("#mytable").find("td:odd").css("border-left", "2px solid blue");});*/</script></head><body><table id="mytable"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></body></html>
これは間違っています。そのため、上記のコードは 2 行にまたがる 1 つの列を使用しています。ヘッダーの部分を見てみましょう。スクリーンショットの効果は次のとおりです。