تعيين ارتفاع يك DIV بر اساس DIV ديگر
فرض كنيد در يك صفحه MasterPage دو تا DIV داريم ، در يكي از اين DIV ها مطالبي كه قرار ميگيرد در صفحات مختلف متفاوت است پس طبعا اندازه اين DIV هم متفاوت است و در صفحات مختلف فرق ميكند سوال من اين است كه آيا ممكن است كه ارتفاع DIV ديگر بر اساس ارتفاع اين DIV تنظيم شود و در صفحات مختلف هميشه اي دو DIV ارتفاع يكساني داشته باشند؟
بله ذوست من ممکنه
اگه با هم رابطه پدر فرزندی ندارن :
<div id="FirstDiv"></div>
<div id="SecondDiv"></div>
<script>
var DIV1 = document.getElemenById('FirstDiv');
var DIV2 = document.getElemenById('SecondDiv');
DIV1.style.width = DIV2.style.width; //اگه می خواید عرضشون هم برابر باشه
DIV1.style.height = DIV2.style.height;
</script>
آخرین ویرایش به وسیله امید امرایی : یک شنبه 13 مرداد 1387 در 21:43 عصر
مرسي ، من اين كدها رو نوشتم ولي درست نشد . صفحه رو ميذارم اگه ممكنه ببنيد كجا رو اشتباه كردم،مرسي
نقل قول: تعيين ارتفاع يك DIV بر اساس DIV ديگر
برای اینکه بتونید از کد زیر استفاده کنید حتما باید برای SecondDiv ، استایل تعریف کنید :
یعنی اول :
<div id="SecondDiv"style="width: 300px; height: 100px; background-color: green;">و بعد :
<p>a b c d e f g</p>
</div>
DIV1.style.width = DIV2.style.width;اگر هم نمیخواید style تعریف کنید میتونید از این کد استفاده کنید :
DIV1.style.height = DIV2.style.height;
<html>درضمن در نوشتن کلمات دقت کنید چون با کم و زیاد شدن یک حرف اون کد کار نمیکنه : getElementById
<head></head>
<body>
<div id="FirstDiv" style="background-image: url(image/header.jpg);"></div>
<div id="SecondDiv"style="background-color: green;">
<p>a b c d e f g</p>
</div>
<script type="text/javascript">
var DIV1 = document.getElementById('FirstDiv');
var DIV2 = document.getElementById('SecondDiv');
DIV1.style.width = DIV2.clientWidth;
DIV1.style.height = DIV2.clientHeight;
</script>
</body>
</html>
آخرین ویرایش به وسیله jaza_sa : چهارشنبه 16 مرداد 1387 در 13:11 عصر دلیل: حذف عرض و ارتفاع
من اون كد رو اينطوري اصلاح كردم درست شد ، مرسي
<script language="javascript">
function spchet(div1,div2)
{
document.getElementById(div2).style.height=documen t.getElementById(div1).offsetHeight;
}
</script>
آخرین ویرایش به وسیله Alen : شنبه 09 شهریور 1387 در 22:57 عصر
نقل قول: تعيين ارتفاع يك DIV بر اساس DIV ديگر
من برای پیدا کرن اشکالات یا Debug کردن کدهای JavaScript یا پیداکردن خصوصیت موردنظرم از Extension ی بانام Firebug استفاده مکنمنوشته شده توسط Alen
به شما هم توصیه میکنم اون رو دانلود کنید و ازش استفاده کنید ، خیلی از مشکلاتتون رو برطرف میکنه
نقل قول: تعيين ارتفاع يك DIV بر اساس DIV ديگر
براي دوستاني كه احتياج دارن يه نمونه ساده از انجام اين كار رو ميذارم،اميدوارم مفيد واقع بشه
دوستان اگر بخواهيم از java استفاده نكنيم چطور مي شه ؟ چون ممكن java رو بروزر طرف كار نكنه
http://www.codeproject.com/KB/HTML/r...ly_simple.aspx
من اصلا استفاده از js رو برای طراحی توصیه نمی کنم. در استانداردهای جدید که مبتنی بر جداسازی ساختار از محتوا هست باید در طراحی دقت بیشتری کرد که تا جایی که ممکن است مسولیت طراحی رو به عهده CSS گذاشت. برای داشتن دو ستون هم ارتفاع تنها با استفاده از CSS می شه به روش زیر عمل کرد:
<style type="text/css">
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
</style>
................
<div id="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant</p>
</div>
<div class="col2">
<p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing lobortis. Nam lobortis ipsum quis nibh. Donec odio. Nullam fermentum, leo id condimentum viverra, augue nibh viverra dui, in placerat arcu sapien nec velit. Nunc tincidunt molestie elit. Sed est mi, posuere vitae, congue vitae, pulvinar vel, enim. Morbi vestibulum erat sed risus. Nulla facilisi.</p>
<p>Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla auctor varius elit. Mauris id nibh ac orci egestas gravida. Nam orci. Fusce dui. Nulla interdum pharetra mauris. Sed fermentum purus ac lectus. Vivamus et dui ac quam vehicula tristique. Cras sem. Integer non nisi commodo elit sagittis interdum.</p>
</div>
</div>
اگر نیازی به شرح داره بگید تا توضیح بدم روش کار رو.
نقل قول: تعيين ارتفاع يك DIV بر اساس DIV ديگر
سلام، اگه لطف کنی و برای یه مبتدی مثل من مرحله به مرحله توضیح بدی ممنون می شم.
دوست عزیز fumnimda
اگه محتویات یکی از DIV ها به صورت پویا تغییر کنه چی ؟
فرقی نمی کنه، به هر حال ارتفاع div ها بر اساس ارتفاع بزرگترین div تعیین میشه.
لطف می کنید در مورد نحوه کار کمی توضیح بدید
سلام دوستان
می خواستم بدونم در رابطه با همین تاپیک میشه کاری کرد که با css ارتفاع div رو بر اساس اندازه صفحه تغییر داد؟
ممنونم تشکر
سلام من یک کد دارم براتون قرار میدم شاید به درد دوستان بخوره
<Html>
<head>
<link href="CSS.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="equal">
<div class="row">
<div class="one">
<h2>This is a box</h2>
<p>This box has less content than the one next to it, but both boxes will still have equal height. No background-image trickery.</p>
</div>
<div class="two">
<h2>This is another box</h2>
<p>This box has more content than the others. If all boxes were table cells, the cell with the most content would decide the height of all cells. It works like that here too, but this is not a table.</p>
<p>Instead, display:table, display:table-row and display:table-cell are used to make divs behave like table cells. Excellent. Too bad it doesn’t work in you-know-which-browser. It does, however, work in modern browsers like Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.</p>
<p>
Read the related blog entry for more info:
<a href="/archive/200405/equal_height_boxes_with_css/">Equal height boxes with CSS</a>
.
</p>
</div>
<div class="three">
<p>This box has even less content. Anything in it is vertically centered.</p>
</div>
</div>
</div>
</body>
</Html>
اینم کد css است خیلی ساده و جالب است.
.equal {
display:table;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row div.one {
width:40%;
background-color:#6f6f6f;
}
.row div.two {
width:40%;
background-color:#9f6f6f;
}
.row div.three {
vertical-align:middle;
background-color:#1f6f6f;
}
اگر دقت کنید تنها کاری کرده اینه که سه div تعریف کرده داخل یک div دیگه که اونم داخل یک div دیگه است و به این صورت به خاصیت display اونا مقدارهای جدولی را داده است به همین راحتی سایز این سه تا div ی با هم یکی میشه چون نوع نمایش آن ها از نوع جدولی است.
دوست عزیز خیلی جالبه ممنون
اما این روش باعث نمیشه که DIV ها
مانند table ها رفتار کنند و معایب اونها رو دارا بشن که؟
سلام اگه میشه توضیح اش را هم بدید
من هم دقیقا همین کار را میخام انجام بدم
توی این تایپیک هم سوالم را زدم
https://barnamenevis.org/showthread.p...-هماهنگ
بعد این خط margin-bottom: -2000px; padding-bottom: 2000px; را به سی اس اس هر سه ستون هام اضافه کردم ولی باز هم ستون هام ناهماهنگ هستند
سلام
از این لینک کمک بگیرید..
سلام
این هم کد ش لطفا بررسی اش کنید
شما دقیقا می خواید کدوم باکس height اش مساوی با height کدوم باکس شه؟
من میخام ستون سمت راست و ستون سمت چپ و ستون مرکزی با هم هم ارتفاع بشود
یعنی ستون نارنجی با طوسی هماهنگ کش بیاید
سلام
کد ها رو سعی کنید مرتب و تو جای خودش بنویسید..
Height.zip
موفق باشی..
سلام من در مورد این قالبی که گذاشته بودم یک سوالی داشتم ...من بیشتر پایه قالب هام به همین شکل ...حالا میخام ببینم ایا این قالب یک کار استانداردی هست که من برای همه کارام از این کار استفاده کنم...اصلا کلا یک قالب استاندارد چه قالبی هست؟
یک مورد دیگه ای هم بود و ان این که من این قالب روش کار میکنم بعد توی دیو ابی رنگ و طوسی وقتی دیو های دیگر را اضافه و کم می میکنم این فوتر مرتب به چپ و راست می افته و قالب را به هم میریزه
این را باید چکار کنم ...مشکل از کجاست که با اضافه کردن دیو های دیگر توی دیو های وسطی و راست و چپ این فوتر جابه جا میشه...
من باید باید همه تغییر هام را بدم بعد بیام این دیو فوتر را تنظیم کنم ؟
یا باید هم زمان با اضافه کردن سایر دیو ها ان را با مکان خودش سازگار کنم
سلام
متاسفانه خیلی نامرتب طراحی کردید..اصول قرار گیریه دیو هارو خوب رعایت نکردید..در نظر بگیرید که این قالب رو طراحی کردید و upload کردین سایت رو امکان داره 1ماه بعد بخواهید اینو تغییر بدید البته بعضی جاهاشو..اصلا یادتون می مونه اصلا از پروژه ای که خودتون کار کردین سر در خواهید آورد..هر پروژه ای که با اصول بره جلو بنظرم موفقتر خواهد بود..
قالب شما خیلی مشکل داره وقتی که اینو میپشونی اونیه کی می زنه بیرون..بنظرم از اول به صورت اصولی کارو ببرید جلو..
فرق نمیکنه کی footer رو قرار بدین ..هر قسمت از پروژه که راحتین میتونین این کارو عملی کنید..
با پرسش و پاسخ و تحقیق به نتایج بسیار خوبی میرسد ..
سلام دوست عزیز
laguage , Time ,Location میتونن یک class باشن چون همگی به یه اندازه هستن.. و اگه اینارو صرف برای نوشته ها ایجاد کردید از span می تونید بجاشون استفاده کنید..
style هارو تو خود تگ ها اعمال نکنید سعی کنید در یه فایل جدا همه کدهای css رو وارد کنید..
border-radius تو بعضی مرورگرها مشکل داره..من از عکس برای کرنرها استفاده می کنم..سخت ولی مشکل واسم ایجاد نمی کنه..
بجای استفده از br از Div های تو در تو و float استفاده کنید..
برای این صفحه اینارو رعایت کنی..خوب میشه..
موفق باشی..
مجلور نیستید حتما از جاوا اسکریپت استفاده کنید بلکه با دادن یک margin-top ساده نیز در بخش css کار خود را راه بیندازید
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول