ホームページ > 記事 > ウェブフロントエンド > CSS で IE6、IE7、FF と互換性のある min-height の最小高さを実装する
CSS で IE6、IE7、FF と互換性のある min-height の最小高さを実装する
- 黄舟オリジナル
- 2017-07-21 09:32:011433ブラウズ
IE6、IE7、FF互換のmin-height最小高さをcssで実装
#mrjin {
background:#ccc; min-height:100px; /*高度最小值设置为：100px*/
height:auto !important; /*兼容FF,IE7也支持 !important标签*/
height:100px; /*兼容ie6*/
overflow:visible;
}
最大宽度...主流浏览器IE对max-width是不支持的，对这一属性的设置在IE中是无效的。同样的对min-width的设置也是无效的。
#commentlist img {
width: expression(this.width > 500 ? 500: true);
max-width: 500px;
}
#woaicss {
width:100%; /*FF来说是有效的。而对于IE则没有作用/*
max-width:500px;
width:expression(document.body.clientWidth > 500? "500px": "auto" );
background:#c00;
margin:0 auto;
line-height:30px;
}
/*expression与Javas cript表达式关联起来，对浏览器要求较高1E5以上使用。不建议常用*/clientHeight、offsetHeight、scrollHeightについて
window.screen.availWidth 現在の画面幅（空白）を返します
window.screen.availHeight現在の画面の高さ (空白部分)
window.screen.width使用する 使用する 使用する 使用する 使用する‐ ‐‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐
ここでは、4 つのブラウザによる document.body の clientHeight、offsetHeight、scrollHeight の解釈について説明します。
4つのブラウザとは、IE (Internet Explorer)、NS (Netscape)、Opera、FF (FireFox)です。
clientHeight
clientHeight について異論のある人はいません。誰もが、それがコンテンツの表示領域の高さ、つまりページ ブラウザーでコンテンツが表示される領域の高さであると考えています。 、通常は最後のツールバーの下からステータスバーの上までです。この領域はページのコンテンツとは関係ありません。
offsetHeight
IE と Opera は、offsetHeight = clientHeight + スクロール バー + 境界線を考慮します。
NS と FF は、offsetHeight が Web ページ コンテンツの実際の高さであると考えており、clientHeight よりも小さくなる可能性があります。
scrollHeight
IE と Opera は、scrollHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
NS と FF は、scrollHeight を Web ページのコンテンツの高さとみなしますが、最小値は clientHeight です。
簡単に言うと、
clientHeight はブラウザを通じてコンテンツが表示される領域の高さです。
NS と FF は、offsetHeight とscrollHeight が両方とも Web コンテンツの高さであると信じていますが、Web コンテンツの高さが clientHeight 以下の場合、scrollHeight の値は clientHeight であり、offsetHeight は clientHeight より小さくなる可能性があります。
IE と Opera は、offsetHeight が表示領域 clientHeight スクロール バーと境界線であると信じています。 scrollHeight は、Web ページ コンテンツの実際の高さです。
同様に、clientWidth、offsetWidth、scrollWidth の説明も上記と同じで、高さを幅に置き換えるだけです。
=============================================== == =======================
clientHeight と offsetHeight の違い
clientHeight と offsetHeight の違い、つまり、 clientHeight の値にはスクロールバーは含まれません offsetHeight の高さにはスクロールバーの高さが含まれます。しかし、clientHeight と offsetHeight の値は正確には何で構成されているのでしょうか?これら 2 つの数値の値を計算するにはどうすればよいでしょうか?
1. clientHeight と offsetHeight の値は何によって決まりますか?
以下のDIVがある場合、表示される本文は「これがDIVの本体です」となります。
上の図に示すように、clientHeight の値は DIV コンテンツの実際の高さと CSS のパディング値によって決まりますが、offsetHeight の値は DIV コンテンツの実際の高さ、CSS のパディング値によって決まります。 CSS、スクロールバーの高さとDIVの境界値; CSSにおけるマージンの値については、clientHeightとoffsetHeightの値には影響しません。
2. CSS の高さの値は clientHeight と offsetHeight にどのような影響を与えますか?
まず、CSSのHeightで定義される高さを見てみましょう。例えば、この記事の最後にある「APPENDIX サンプルコード」（注：以下「サンプルコード」と呼びます）では、innerDIVClass の Height 値を 50px に設定しており、IE で計算した値は次のようになります。つまり、IE では、CSS の Height 値はパディングを含む DIV の高さ (つまり、offsetHeight の値) を定義します。Firefox では、CSS の Height 値は DIV の実際のコンテンツの高さのみを定義します。 、パディングはこの値に含まれません (70 = 50 + 10 * 2)。
IE の場合:
innerDiv.clientHeight: 46 innerDiv.offsetHeight: 50 outerDiv.clientHeight: 0 outerDiv.offsetHeight: 264
Firfox の場合:
innerDiv.clientHeight: 70 innerDiv.offsetHeight: 74 outerDiv.clientHeight: 348 outerDiv.offsetHeight: 362
上記の例で、なぜ IE で externalDiv.clientHeight の値が 0 になるのか不思議に思われるかもしれません。サンプルコードでは、outerDIVClassのHeightの値が定義されていないため、この時点でIEではclientHeightの値を計算することができません。同様に、コード例では、innerDIVClass の Height 値が last に変更された場合、innerDIV.clientHeight の値も 0 になります。 (注: これは Firefox には存在しません)。
IEの場合：
innerDiv.clientHeight: 38 innerDiv.offsetHeight: 42 outerDiv.clientHeight: 0 outerDiv.offsetHeight: 256
Firefoxの場合：
innerDiv.clientHeight: 20 innerDiv.offsetHeight: 24 outerDiv.clientHeight: 298 outerDiv.offsetHeight: 312
APPENDIX サンプルコード
<html>
<head>
<style type="text/css">......
.innerDivClass
{...}{...}{...}{
color: red;
margin: 37px;
padding: 10px;
border: 2px solid #000000;
height: 50px;
}
.outerDivClass
{...}{...}{...}{
padding: 100px;
margin: 200px;
border: 7px solid #000000;
}
</style>
<script>......
function checkClientHeight()
......{
var innerDiv = document.getElementById("innerDiv");
var outerDiv = document.getElementById("outerDiv");
result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />";
result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />";
result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />";
result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />";
}
</script>
</head>
<body>
<div id="outerDiv" class="outerDivClass">
<div class="innerDivClass" id="innerDiv">
Hello world.
</div>
</div>
<p></p>
<div id="result">
</div>
<input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" />
</body>
</html>以上がCSS で IE6、IE7、FF と互換性のある min-height の最小高さを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。