0 امتیاز
قبل در برنامه نویسی توسط (72 امتیاز)
ویرایش شده قبل توسط

با سلام
چیدمان صفحه من بصورت زیر است:

<body >

<div id="container" >
<div id="header" >

 </div>  <div id="sidebar"  >     </div>  <div id="containbody">
<div id="body"  >     </div>
</div>
<div id="footer">     </div>  </div>

</body>

میخوام زمانیکه ارتفاع دایو containbody براثر محتوای درونش زیاد شد ارتفاع دایو sidebar هم با اون هم ارتفاع بشه
ممنون میشم راهنمایی کنید

قبل توسط (7.2هزار امتیاز)
اگر ممکن است برای سوال خود  www.jsfiddle.net ارائه نمایید

2 پاسخ

+3 امتیاز
قبل توسط (7.2هزار امتیاز)
انتخاب شده قبل توسط
 
بهترین پاسخ

بدون استفاده از جاوا اسکریپت و تنها CSS:

شما می توانید یک div به عنوان wrapper بر روی دو div دیگر تعریف نمایید، سپس به وسیله CSS بگویید که همواره div های فرزند تمام ارتفاع div پدر را پر کند:

CSS:

#mainContent {
    overflow: hidden;
    position: relative;
    width: 100%;
}
#sidebar {
    background:yellow;
    float:right;
    width:25%;
    height:100%;
   position: absolute;
    right: 0;
}
#containbody {
    background:green;
    float:left;
    height:300px;
    width:75%;
    height:100%;
}
#footer {
    clear:both;
}

HTML:

<body>
    <div id="container">
        <div id="header">head</div>
        <div id='mainContent'> 
          <div id="sidebar">side</div>
          <div id="containbody">
            <div id="body">body
                <br/>
            Test Line1
            <br/>
            Test Line2
             <br/>
            Test Line2</div>
          </div>
        </div>
        <div id="footer">foot</div>
    </div>
</body>

 

JSFiddle

+3 امتیاز
قبل توسط (4.9هزار امتیاز)

سلام،‌می‌توانید از جاوااسکریپت استفاده کنید:

$(document).ready(function () {
    var containbodyHeight = $('#containbody').height();
    var sidebarHeight = $('#sidebar').height();

    if (containbodyHeight > 200) {
        $('#sidebar').css('height', containbodyHeight);
    } else {}
});

این کد با Jquery نوشته شده. باید Jquery را به صفحه اضافه کنید.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

jsfiddle.net

منبع

سوالات مشابه

+1 امتیاز
1 پاسخ 1.4هزار بازدید
+1 امتیاز
1 پاسخ 1.9هزار بازدید
سوال شده 10 سال قبل در برنامه نویسی توسط IMANAZADI (72 امتیاز)
+1 امتیاز
1 پاسخ 1.5هزار بازدید
سوال شده 9 سال قبل در برنامه نویسی توسط IMANAZADI (72 امتیاز)
+1 امتیاز
0 پاسخ 516 بازدید
0 امتیاز
1 پاسخ 669 بازدید
سوال شده 10 سال قبل در برنامه نویسی توسط Saeed Zarinfam (1.1هزار امتیاز)
+1 امتیاز
1 پاسخ 5.4هزار بازدید
0 امتیاز
1 پاسخ 390 بازدید
سوال شده 10 سال قبل در برنامه نویسی توسط Saeed Zarinfam (1.1هزار امتیاز)
0 امتیاز
1 پاسخ 711 بازدید
+1 امتیاز
1 پاسخ 1.2هزار بازدید
...