افزایش اندازه height یک div به صورت داینامیک براساس div دیگر

دیدگاه

آموزش آموزش CSS آموزش HTML

چگونه میتوان عرض یک div را به اندازه عرض div دیگر بزرگ کرد؟

شاید برای شما هم اتفاق افتاده باشد که دو div را در کنار هم قرار دهید ( از روش float ) و بخواهید که یک div به اندازه ای که div دیگر از نظر عرضی یا height افزایش می یابد بزرگ شود  و این در صورتی است که شما اندازه height هیچ یک از div ها را نمیدانید. تنها چیزی که شما از آن آگاهی دارید این است که یک div مثلا div سمت راست از div دیگر یعنی div سمت چپ بزرگتر میباشد.

یکی از روش ها این است که یک container برای دو div که قرار است در کنار هم قرار گیرند اضافه کنیم و رنگ پس زمینه آن را به رنگ دلخواه قرار دهیم این کار زمانی کاربرد دارد که هر دو div پس زمینه با رنگ یکسانی داشته باشند. با این کار شما مشکل اصلی را حل نکرده اید ولی به ظاهر مشکلی نمایان نمیباشد حال در صورتی که رنگ دو div با هم متفاوت باشد چه باید کرد؟

مشاهده می کنید که در چنین شرایطی میتوان با مشکل مواجه شد به این دلیل که ما نمیدانیم عرض div ما به چه اندازه ای بزرگ خواهد شد، به عبارتی عرض آن با توجه به محتوایی که در آن قرار میگیرد به صورت داینامیک تغییر میکند، تنها چیزی که میدانیم این است که div سمت چپ همواره بزرگتر از div سمت راست میباشد.

برای رفع این مشکل راه حل زیر میتواند در بیشتر مواقع به ما کمک کند، این روش زمانی به بهترین نحو پاسخ گو میباشد که شما بدانید که یکی از div ها همواره بزرگتر از div دیگر است.

عکس زیر شرایط قبل از برطرف کردن مشکل را نشان میدهد.

 

wrong

 

کد HTML, CSS عکس بالا به صورت زیر میباشد

 

راست
چپ

چپ

چپ

 

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.mmt-container {
	background-color: #34495e;
	padding: 20px;
	color: white;
	font-family: Tahoma;
}
.mmt-right, .mmt-left {
	padding: 50px 30px;
	text-align: center;
}
.mmt-right {
	float: right;
	background-color: #f1c40f;
	width: 20%;
}
.mmt-left {
	float: left;
	background-color: #3498db;
	width: 80%;
}
.mmt-clear {
	clear: both;
}

 

عکس زیر شرایط بعد از برطرف کردن مشکل را به شما نشان میدهد شرایطی که در اصل و صورت طبیعی انتظار میرود

  

right

 

کد HTML, CSS عکس بالا به صورت زیر میباشد

 

راست
چپ

چپ

چپ

 

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.mmt-container {
	background-color: #34495e;
	padding: 20px;
	color: white;
	font-family: Tahoma;
	position: relative;
}
.mmt-right, .mmt-left {
	padding: 50px 30px;
	text-align: center;
}
.mmt-right {
	background-color: #f1c40f;
	width: 20%;
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
}
.mmt-left {
	background-color: #3498db;
	width: 80%;
	position: relative;
	right: 0;
}
.mmt-clear {
	clear: both;
}
Share on LinkedIn0Tweet about this on TwitterShare on Google+0Share on Facebook0

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *