Web フロントエンド初心者向けのメモ: 高さと min-height_html/css_WEB-ITnose の違い

 浏览器参照基准：Firefox, Chrome, Safari, Opera, IE；<br />　　* IE6不支持CSS min-height属性。最小高度的定义：1. 元素拥有默认高度；2. 当内容超出元素的默认高度时，元素的高度随内容增加而增加<br />Figure 1:如下图的需求<br /><br />　　* 如上图，两个区域的高度不一样。这就是 min-height 的效果演示。元素拥有一个默认的高度，当内容超出该默认高度时，元素的高度同时随内容而增加。

eg1:<br /><style>.test{    float:left;    width:200px;    margin:0 5px;    padding:10px;    border-radius:10px;    background:#eee;}.test{    min-height:80px;  /* 实现最小高度代码 */}</style><div class="test">喝水为什么会中毒？</div><div class="test">喝水为什么会中毒？<br>日前有媒体报道称日饮用3升水年轻10岁，于是有人真开始喝了，可喝了4天后，尿血了。水是生命之源，但是不是喝水越多越好呢？喝水多了又会发生什么呢？</div>

　* 如上代码，我们只需要一行代码 min-height:80px; 就可以实现非IE6浏览器的最小高度。

.test{    height:80px;  /* 看看ie6会如何 */}

* このスタイルは IE6 で表示します。あなたは奇跡を発見したかもしれません、はい、あなたは正しく読んでいます。このデモのパフォーマンスは、高度なブラウザーでの eg1 デモのパフォーマンス、つまり最小高さの効果と一致しています。

* しかし、今は勝つときではありません。なぜなら、この例は高度なブラウザではゲームオーバーになることがわかるからです。どうすればいいですか？これは嘘ではないでしょうか？心配しないでください。資格のあるプログラマーであれば、それを解決するさまざまな方法を必ず考えます。

* あなたはフロントエンド エンジニアなので、ブラウザ固有の CSS ハックをいくつか知っておく必要がありますが、ほとんどの場合推奨されません。 ie6 では高さを使用する一方で、高度なブラウザでも min-height を使用する方法を見つけてみましょう。これで目標を達成できそうです。やってみましょう。

Figure 4:大获全胜的场景<br />.test{    min-height:80px;  /* for ie7+, firefox, chrome, safari, opera */    _height:80px;        /* for ie6 */}

* さて、IE6 を含む min-height 効果を実装しました。

* 覚えておいてください、可視以外のオーバーフロー値を決して追加しないでください。そうしないと、IE6 に悲劇的なデモが表示されます