تغییر ارتفاع div

[dr_csharp]

سلام دوستان.من صفحه ای بصورت زیر ایجاد کردم :
aspx :


<formid="form1"runat="server">
<div id="main">
<div id="left">
this is left
</div>
<div id="right">
this is right
<br/>

this is right

</div>
</div>
</form>

CSS:


#main
{
background-color: Lime;
margin: auto;
width: 700px;
height: 500px;
min-height: 500px;
height: auto!important;
}
#right
{
float: right;
width: 140px;
border-left: solid1pxgreen;
background-color: blue;
}
#left
{
float: left;
width: 550px;
background-color: Red;
}


من میخوام با افزایش height هر قسمت ،قسمت دیگر نیز افزایش height بدهد
26267
یعنی قسمت آبی و قرمز دارای height یکسان باشند.

[Exception]

این که بخوای ارتفاع یک div با یک div دیگه تنظیم بشه هم کار ساده ای نیست.
برای نمونه اینها رو ببین:
http://positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://articles.techrepublic.com.com/5100-10878_11-5268973.html
http://redmelon.net/tstme/3cols2/
نقل از اینجا (http://barnamenevis.org/forum/showthread.php?p=643664#post643664)

[dr_csharp]

آیانمیشه کاری کرد که مثلا هر دو Div چپ و راست از ارتفاع main استفاده کنن ؟

[Exception]

آیانمیشه کاری کرد که مثلا هر دو Div چپ و راست از ارتفاع main استفاده کنن ؟
ارتفاعشون رو 100% کن.
راستی اینو چرا گذاشتی؟

height: auto!important;

[dr_csharp]

ارتفاعشون رو 100% کن.
راستی اینو چرا گذاشتی؟

height: auto!important;
با استفاده از important میشه به browser های جدید گفت که این style نسبت به بقیه مهم تره و اینو بعنوان اصلیه بگیر

[Exception]

با استفاده از important میشه به browser های جدید گفت که این style نسبت به بقیه مهم تره و اینو بعنوان اصلیه بگیر
معنیش رو میدونم.
فقط تو اینکه دو بار height دادی رو موندم!

height: 500px;
height: auto!important;این که این دو تا با هم اومده بی معنیه و فقط دومی اعمال میشه.

[emad_67]

معنیش رو میدونم.
فقط تو اینکه دو بار height دادی رو موندم!

height: 500px;
height: auto!important;این که این دو تا با هم اومده بی معنیه و فقط دومی اعمال میشه.
height: 500px برای ie6 به صورت min-height عمل میکنه (ie6 از min-height پشتیبانی نمیکنه) ولی برای ie7 و سایر مرورگر ها height برای تعیین ارتفاع هست و min-height هم حداقل ارتفاع. بنابراین ناچاریم برای اینکه توی ie6 هم بتونیم min-height رو به نوعی استفاده کنیم از این روش کمک بگیریم. یعنی با height: auto !important این خط رو نسبت به بقیه ارجعیت بدیم. همچنین ie6 کلمه important رو نمیشناسه.
http://barnamenevis.org/forum/showthread.php?t=128462&highlight=min-height

[Exception]

height: 500px برای ie6 به صورت min-height عمل میکنه (ie6 از min-height پشتیبانی نمیکنه) ولی برای ie7 و سایر مرورگر ها height برای تعیین ارتفاع هست و min-height هم حداقل ارتفاع. بنابراین ناچاریم برای اینکه توی ie6 هم بتونیم min-height رو به نوعی استفاده کنیم از این روش کمک بگیریم. یعنی با height: auto !important این خط رو نسبت به بقیه ارجعیت بدیم. همچنین ie6 کلمه important رو نمیشناسه.
http://barnamenevis.org/forum/showthread.php?t=128462&highlight=min-height
تازه الان فهمیدم چه کار میخواستی بکنی! دلیلش هم این بود که این کد که نوشتی اشتباه هست.
اگر هدف این بوده که عماد گفت، باید اینجوری باشه:

height: auto!important;
height: 500px;
یعنی اول auto بیاد با important و بعدش 500px.
اینجوری میشه همون که میخواستی اما این که الان نوشتی، همون کاری که من گفتم رو میکنه و الان با کد تو عملا با تعریف دومی فقط اعمال میشه برای height. (امتحان کن!)
دلیلش هم واضحه. browser هایی که important رو نمیشناسن (مثل IE6) آخرین تعریف رو استفاده میکنن و browser هایی که میشناسن، از important استفاده میکنن. حالا اگر آخرین تعریف important باشه، تعریف قبلی هیچ اثری نمیذاره.

[dr_csharp]

فکر کنم با % بدی بهتر باشه
نه تست کردم..اصلا ارتفاع mainظاهرا رو ارتفاع left و right بی اثره !؟
البته مشکل با main هست .. الان وقتی ارتفاع مثلا left افزایش پیدا میکنه main هیچ تغییری نمیکنه و به همون اندازه قبلی میمونه ..البته تو IE6 :



#main
{
padding: 20px;
height: auto !important;
height: 500px;
min-height: 500px; /*background-color: Black;*/
}
#right
{
float: right;
width: 170px;
height: 100%;
border-left: solid 1px green; /*background-color: Green;*/
}
#left
{
float: left;
width: 750px;
height: 100%;
margin-right: 10px;
position: absolute; /*background-color: Red;*/
}

[emad_67]

تگ داک تایپ رو تغییر بده یا کلا حذف کن.چون به غیر از این کار من دلیل دیگه و روشی نمی دونم و اصلا هم فکر نمی کنم بشه مگه اینکه با display:table یه کار هایی بتونی بکنی
اینکار با % اصلا امکان پذیر نیست، حالا چه با doctype چه بدون اون. یکی از روش هاش رو من در بالا گفتم، روش های دیگه ای در صفحه قبل لینکش هست.
موفق باشید :چشمک: