div 適応高さ問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div 適応高さ問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:47:21

オリジナル

1136 人が閲覧しました

図に示すように 3 つの div が定義されています。上の div はブラウザの上部に近く、中央の空白の div は適応的な高さを持ちます。（つまり、真ん中に残った分だけ記入します）どうすればよいでしょうか？

上下の div は私がインクルードした 2 つの HTML です

ディスカッションへの返信 (解決策)

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>页面名称</title><style type="text/css">html,body { 	height: 100%;	margin: 0;	padding: 0;}.class1 {	position: absolute;	background-color: #f60;	left: 0;	top: 0;	width: 100%;	height: 100px;}.class2 {	position: absolute;	background-color: #cc0;	left: 0;	top: 100px;	bottom: 100px;	width: 100%;}.class3 {	position: absolute;	background-color: #f60;	left: 0;	bottom: 0;	width: 100%;	height: 100px;}</style></head><body><div class="class1"></div><div class="class2"></div><div class="class3"></div></body></html>

ログイン後にコピー

上下の div の高さが固定されている場合は、次のようにして中間の高さを計算できます。 js

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>页面名称</title><style type="text/css">html,body { 	height: 100%;	margin: 0;	padding: 0;}.class1 {	position: absolute;	background-color: #f60;	left: 0;	top: 0;	width: 100%;	height: 100px;}.class2 {	position: absolute;	background-color: #cc0;	left: 0;	top: 100px;	bottom: 100px;	width: 100%;}.class3 {	position: absolute;	background-color: #f60;	left: 0;	bottom: 0;	width: 100%;	height: 100px;}</style></head><body><div class="class1"></div><div class="class2"></div><div class="class3"></div></body></html>

ログイン後にコピー

真ん中に別の画像を置く場合、どうすれば div 全体を自然に埋めることができますか? 歪む可能性がありますが、div を埋める必要があります

class2 の高さ = 画面の高さ - class1 .height-class2.height
ブラウザの表示高さ: $(widow ).height()
class1 高さ: $(".class1").height()
class3 高さ: $(".class3").height ()
var class2height=$(widow).height()-$( ".class1").height()-$(".class3").height();
class2 スタイルの高さ $(" に値を代入します。 class2").css("height",class2height+"px")

真ん中に別の画像を置く場合、どうすれば div 全体を自然に埋めることができますか? 歪む可能性がありますが、div を埋める必要があります。

画像サイズが含まれるように設定されている場合、背景画像が div 全体を埋めます。

//中央の空白の div の高さを調整します

/ div>

;div style="width:100%;height:60px;background:#ccc;position:absolute;bottom:0;"