ورود

View Full Version : سوال: تعيين ارتفاع يك DIV بر اساس DIV ديگر


Alen
یک شنبه 13 مرداد 1387, 08:25 صبح
فرض كنيد در يك صفحه MasterPage دو تا DIV داريم ، در يكي از اين DIV ها مطالبي كه قرار ميگيرد در صفحات مختلف متفاوت است پس طبعا اندازه اين DIV هم متفاوت است و در صفحات مختلف فرق ميكند سوال من اين است كه آيا ممكن است كه ارتفاع DIV ديگر بر اساس ارتفاع اين DIV تنظيم شود و در صفحات مختلف هميشه اي دو DIV ارتفاع يكساني داشته باشند؟
امید امرایی
یک شنبه 13 مرداد 1387, 15:13 عصر
بله ذوست من ممکنه
اگه با هم رابطه پدر فرزندی ندارن :


<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>
Alen
چهارشنبه 16 مرداد 1387, 12:15 عصر
مرسي ، من اين كدها رو نوشتم ولي درست نشد . صفحه رو ميذارم اگه ممكنه ببنيد كجا رو اشتباه كردم،مرسي
jaza_sa
چهارشنبه 16 مرداد 1387, 13:09 عصر
برای اینکه بتونید از کد زیر استفاده کنید حتما باید برای 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;
DIV1.style.height = DIV2.style.height;
اگر هم نمیخواید style تعریف کنید میتونید از این کد استفاده کنید :

<html>
<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>درضمن در نوشتن کلمات دقت کنید چون با کم و زیاد شدن یک حرف اون کد کار نمیکنه : getElementById
Alen
چهارشنبه 16 مرداد 1387, 13:09 عصر
من اون كد رو اينطوري اصلاح كردم درست شد ، مرسي

<script language="javascript">
function spchet(div1,div2)
{
document.getElementById(div2).style.height=documen t.getElementById(div1).offsetHeight;
}
</script>
jaza_sa
چهارشنبه 16 مرداد 1387, 13:16 عصر
من اون كد رو اينطوري اصلاح كردم درست شد ، مرسي
<script language="javascript">
function spchet(div1,div2)
{
document.getElementById(div2).style.height=documen t.getElementById(div1).offsetHeight;
}
</script>

من برای پیدا کرن اشکالات یا Debug کردن کدهای JavaScript یا پیداکردن خصوصیت موردنظرم از Extension ی بانام Firebug استفاده مکنم
به شما هم توصیه میکنم اون رو دانلود کنید و ازش استفاده کنید ، خیلی از مشکلاتتون رو برطرف میکنه
Alen
شنبه 09 شهریور 1387, 12:50 عصر
براي دوستاني كه احتياج دارن يه نمونه ساده از انجام اين كار رو ميذارم‏،اميدوارم مفيد واقع بشه
احمد سامعی
چهارشنبه 14 مرداد 1388, 18:52 عصر
دوستان اگر بخواهيم از java استفاده نكنيم چطور مي شه ؟ چون ممكن java رو بروزر طرف كار نكنه
emad_67
چهارشنبه 14 مرداد 1388, 22:07 عصر
دوستان اگر بخواهيم از java استفاده نكنيم چطور مي شه ؟ چون ممكن java رو بروزر طرف كار نكنه
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
fumnimda
پنج شنبه 15 مرداد 1388, 20:40 عصر
دوستان اگر بخواهيم از java استفاده نكنيم چطور مي شه ؟ چون ممكن java رو بروزر طرف كار نكنه

من اصلا استفاده از 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>



اگر نیازی به شرح داره بگید تا توضیح بدم روش کار رو.
lorddigic
دوشنبه 06 مهر 1388, 18:42 عصر
من اصلا استفاده از js رو برای طراحی توصیه نمی کنم. در استانداردهای جدید که مبتنی بر جداسازی ساختار از محتوا هست باید در طراحی دقت بیشتری کرد که تا جایی که ممکن است مسولیت طراحی رو به عهده CSS گذاشت. برای داشتن دو ستون هم ارتفاع تنها با استفاده از CSS می شه به روش زیر عمل کرد:



<style type="text/css">
C#‎ontainer { overflow: hidden; }
C#‎ontainer div { float: left; background: C#‎cc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
C#‎ontainer .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>



اگر نیازی به شرح داره بگید تا توضیح بدم روش کار رو.

سلام، اگه لطف کنی و برای یه مبتدی مثل من مرحله به مرحله توضیح بدی ممنون می شم.:لبخند:
Alen
دوشنبه 06 مهر 1388, 20:01 عصر
دوست عزیز fumnimda
اگه محتویات یکی از DIV ها به صورت پویا تغییر کنه چی ؟
emad_67
سه شنبه 07 مهر 1388, 01:39 صبح
دوست عزیز fumnimda
اگه محتویات یکی از DIV ها به صورت پویا تغییر کنه چی ؟
فرقی نمی کنه، به هر حال ارتفاع div ها بر اساس ارتفاع بزرگترین div تعیین میشه.
Alen
چهارشنبه 08 مهر 1388, 23:16 عصر
لطف می کنید در مورد نحوه کار کمی توضیح بدید
behiunforgiven
چهارشنبه 27 آبان 1388, 15:35 عصر
سلام دوستان

می خواستم بدونم در رابطه با همین تاپیک میشه کاری کرد که با css ارتفاع div رو بر اساس اندازه صفحه تغییر داد؟



ممنونم تشکر
mohsen_Iran
چهارشنبه 27 آبان 1388, 23:54 عصر
سلام من یک کد دارم براتون قرار میدم شاید به درد دوستان بخوره


<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>
mohsen_Iran
چهارشنبه 27 آبان 1388, 23:55 عصر
اینم کد 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 ی با هم یکی میشه چون نوع نمایش آن ها از نوع جدولی است.
Alen
دوشنبه 23 فروردین 1389, 14:43 عصر
دوست عزیز خیلی جالبه ممنون
اما این روش باعث نمیشه که DIV ها
مانند table ها رفتار کنند و معایب اونها رو دارا بشن که؟
ERIKA
یک شنبه 06 آذر 1390, 12:56 عصر
من اصلا استفاده از 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>



اگر نیازی به شرح داره بگید تا توضیح بدم روش کار رو.


سلام اگه میشه توضیح اش را هم بدید
من هم دقیقا همین کار را میخام انجام بدم
توی این تایپیک هم سوالم را زدم
http://barnamenevis.org/showthread.php?315391-افزایش-ارتفاع-ستون-ها-در-صفحه-به-صورت-هماهنگ
بعد این خط margin-bottom: -2000px; padding-bottom: 2000px; را به سی اس اس هر سه ستون هام اضافه کردم ولی باز هم ستون هام ناهماهنگ هستند
Saber Mogaddas
یک شنبه 06 آذر 1390, 16:50 عصر
سلام
از این لینک (http://www.pars-click.com/ShowTrick.aspx?ID=5) کمک بگیرید..
ERIKA
دوشنبه 07 آذر 1390, 18:03 عصر
سلام
این هم کد ش لطفا بررسی اش کنید
Saber Mogaddas
دوشنبه 07 آذر 1390, 18:41 عصر
شما دقیقا می خواید کدوم باکس height اش مساوی با height کدوم باکس شه؟
ERIKA
دوشنبه 07 آذر 1390, 18:47 عصر
من میخام ستون سمت راست و ستون سمت چپ و ستون مرکزی با هم هم ارتفاع بشود
یعنی ستون نارنجی با طوسی هماهنگ کش بیاید
Saber Mogaddas
دوشنبه 07 آذر 1390, 19:12 عصر
سلام
کد ها رو سعی کنید مرتب و تو جای خودش بنویسید..

78474

موفق باشی..
ERIKA
سه شنبه 15 آذر 1390, 09:03 صبح
سلام
کد ها رو سعی کنید مرتب و تو جای خودش بنویسید..

78474

موفق باشی..

سلام من در مورد این قالبی که گذاشته بودم یک سوالی داشتم ...من بیشتر پایه قالب هام به همین شکل ...حالا میخام ببینم ایا این قالب یک کار استانداردی هست که من برای همه کارام از این کار استفاده کنم...اصلا کلا یک قالب استاندارد چه قالبی هست؟
یک مورد دیگه ای هم بود و ان این که من این قالب روش کار میکنم بعد توی دیو ابی رنگ و طوسی وقتی دیو های دیگر را اضافه و کم می میکنم این فوتر مرتب به چپ و راست می افته و قالب را به هم میریزه
این را باید چکار کنم ...مشکل از کجاست که با اضافه کردن دیو های دیگر توی دیو های وسطی و راست و چپ این فوتر جابه جا میشه...
من باید باید همه تغییر هام را بدم بعد بیام این دیو فوتر را تنظیم کنم ؟
یا باید هم زمان با اضافه کردن سایر دیو ها ان را با مکان خودش سازگار کنم
Saber Mogaddas
سه شنبه 15 آذر 1390, 12:54 عصر
سلام
متاسفانه خیلی نامرتب طراحی کردید..اصول قرار گیریه دیو هارو خوب رعایت نکردید..در نظر بگیرید که این قالب رو طراحی کردید و upload کردین سایت رو امکان داره 1ماه بعد بخواهید اینو تغییر بدید البته بعضی جاهاشو..اصلا یادتون می مونه اصلا از پروژه ای که خودتون کار کردین سر در خواهید آورد..هر پروژه ای که با اصول بره جلو بنظرم موفقتر خواهد بود..
قالب شما خیلی مشکل داره وقتی که اینو میپشونی اونیه کی می زنه بیرون..بنظرم از اول به صورت اصولی کارو ببرید جلو..
فرق نمیکنه کی footer رو قرار بدین ..هر قسمت از پروژه که راحتین میتونین این کارو عملی کنید..
با پرسش و پاسخ و تحقیق به نتایج بسیار خوبی میرسد ..
Saber Mogaddas
چهارشنبه 16 آذر 1390, 10:35 صبح
سلام دوست عزیز
laguage , Time ,Location میتونن یک class باشن چون همگی به یه اندازه هستن.. و اگه اینارو صرف برای نوشته ها ایجاد کردید از span می تونید بجاشون استفاده کنید..
style هارو تو خود تگ ها اعمال نکنید سعی کنید در یه فایل جدا همه کدهای css رو وارد کنید..
border-radius تو بعضی مرورگرها مشکل داره..من از عکس برای کرنرها استفاده می کنم..سخت ولی مشکل واسم ایجاد نمی کنه..
بجای استفده از br از Div های تو در تو و float استفاده کنید..
برای این صفحه اینارو رعایت کنی..خوب میشه..
موفق باشی..
aafshar18
یک شنبه 20 اردیبهشت 1394, 19:41 عصر
مجلور نیستید حتما از جاوا اسکریپت استفاده کنید بلکه با دادن یک margin-top ساده نیز در بخش css کار خود را راه بیندازید:چشمک: