ホームページ  >  記事  >  ウェブフロントエンド  >  CSSを使ってdivの最大幅・高さ、最小幅・高さを制御する方法を詳しく解説

CSSを使ってdivの最大幅・高さ、最小幅・高さを制御する方法を詳しく解説

高洛峰
高洛峰オリジナル
2017-03-17 14:25:371849ブラウズ

ウェブページ制作では、幅、最大幅/高さ、または最小幅/高さを制御する必要があることがよくありますが、私を含め、多くの友人がそのような問題に遭遇することがあります。 Baidu にはたくさんありましたが、解決策が見つかりませんでした。後でフォーラムでそのことを知り、css3 スタイル のコードを共有したいと思います。このコードは、すべての主要な主流ブラウザと完全に互換性があります。

* 最小幅*/

.min_width{min-width:300px;

/* IE の最大幅を設定します */
_width:expression(document.body.clientWidth }

/* 最大幅*/
.max_width{
max-width:600px;
/* IE の最大幅を設定します */
_width:expression(document.body.clientWidth > 600 ? " 600px" : "auto");
}

/* 最小の高さ*/
.min_height{
min-height:200px;
/* IE の最小の高さを設定します */
_height:expression(this.scrollHeight < 200 ? "200px" : "auto");
}

/* 最大高さ*/
.max_height{

max-height:400px; /* IE の最大高さを設定します */
_height:expression( this.scrollHeight > 400 ? "400px" : "auto");
}
/* 最大幅と最小幅*/
min-width:300px;
max-width:600px;
/* セットIE の最小幅と最大幅 */
_width:expression(
document.body.clientWidth ( document.body.clientWidth > 600 ? "600px" : "auto")
) ;
}

/* 最大高と最小高さ*/
.min_and_max_height{
min-height:200px;
max-height:400px;
/* IE の最小高さと最大高さを設定します */
_height: expression(
this.scrollHeight ( this.scrollHeight > 400 ? "400px" : "auto")
);
}

以上がCSSを使ってdivの最大幅・高さ、最小幅・高さを制御する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。