مقید کردن ارتفاع دو div مجاور به هم

[sasansara]

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

[hightech]

سايتهايي با طراحي استاندارد، از كد js استفاده ميكنن
به اين صورت كه بعد از لود كامل صفحه اندازه 2تا شيي رو گرفته و ارتفاعها رو تنظيم كنيد
با jquery كدش اينه:
$(document).ready(function() {
// set height of 2 dives
});

[sasansara]

منظورم وقتیه که محتوای div اول به صورت پویا تغییر میکنه . می خوام بدونم بوسیله css راهی داره که ارتفاع دومی هم تغییر کنه. مثل td های مجاور در یک table

[hightech]

css اجرای پویا نداره که بخواد با تغییراتی، اون هم تغییر کنه
اگر هم در مورد css3 از عبارات قابل اجرا مثل expression استفاده کنید، فقط یک مرتبه جواب میده
مثل این:
height:expression(document.body.clientHeight-120);

[hakan648]

سلام
هم بوسیله JavaScript میشه این کار رو انجام داد و هم بوسیله یک ترفند CSS & HTML .

با جاوا اسکریپت که دوستان فرمودند
برای ترفند دوم هم میتونید این پست بنده (http://barnamenevis.org/showthread.php?303908-%D8%B9%D8%AF%D9%85-%D8%AA%D8%B7%D8%A7%D8%A8%D9%82-%D8%B3%D9%85%D8%AA-%DA%86%D9%BE-%D9%88-%D8%B1%D8%A7%D8%B3%D8%AA-%D8%B3%D8%A7%DB%8C%D8%AA&p=1337712&viewfull=1#post1337712)رو ( با دقت ) مطالعه بفرمایید .

موفق باشید ...

[mahan19]

بسیار ساده : میتونید یک رو فرزند دیگری قرار بدید و خاصیت ارتفاع والد رو اینگونه تنظیم کنید:

min-height:1px;


با این کار سایز والد متناسب با سایز فرزند تغییر میکنه.

[emad_67]

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


منظورم وقتیه که محتوای div اول به صورت پویا تغییر میکنه . می خوام بدونم بوسیله css راهی داره که ارتفاع دومی هم تغییر کنه. مثل td های مجاور در یک table
بهترین روش و شاید درست ترین روش استفاده از خصوصیت display: table در css هست. این خصوصیت این امکان رو مهیا می کنه که یک المان با رفتاری همانند table رندر بشه:

.test
{
border: 1px solid #000;
display: table;
width: 100px;
}
.test div
{
display: table-cell;
border: 1px solid #000;
}


<div class="test">
<div style="height: 400px;">
test1
</div>
<div>
test2
</div>
</div>

همانطور که می بینی div بیرونی دارای خصوصیت display: table هست و دو div داخلی که قرار نقش سلول های جدول رو بازی کنند دارای خصوصیت display: table-cell هستند.

[sasansara]

بهترین روش و شاید درست ترین روش استفاده از خصوصیت display: table در css هست.


من دیر جواب شما رو دیدم. چون جواب بقیه دوستان مطلوب نبود فکر نمی کردم راهی داشته باشه.
واقعا عالی بود. دستتون درد نکنه.من با مقادیر مرتبط به table برای display آشنا نبودم.

[Saber Mogaddas]

سلام
برای اینکار می تونید از این پلاگین (http://www.pars-click.com/ArticleDetail.aspx?id=1) استفاده کنید ..چند بار این بحث شده اگه جستجو کنید پیدا میکنید..
موفق باشی..