هم ارتفاع کردن دو div بر اثر تغییرات محتوای درون

0 رأی
میانگین بازدید روزانه 0.35835 بازدید

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

<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 هم با اون هم ارتفاع بشه
ممنون میشم راهنمایی کنید

سوال 6 سال قبل در تالار برنامه نویسی توسط IMANAZADI (72 امتیاز)
ویرایش 6 سال قبل توسط Saeed Zarinfam
اگر ممکن است برای سوال خود  www.jsfiddle.net ارائه نمایید

2 جواب

+3 رأی
 
بهترین جواب

بدون استفاده از جاوا اسکریپت و تنها 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

جواب 6 سال قبل توسط kashi (7,139 امتیاز)
انتخاب شده در 6 سال قبل توسط IMANAZADI
+3 رأی

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

$(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

منبع

جواب 6 سال قبل توسط ایمان (4,837 امتیاز)

سوال های مشابه

+1 رأی
1 جواب میانگین بازدید روزانه 0.4968 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 0.581,458 بازدید
سوال 6 سال قبل در تالار برنامه نویسی توسط IMANAZADI (72 امتیاز)
0 رأی
0 جواب میانگین بازدید روزانه 0.1469 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 0.471,128 بازدید
سوال 6 سال قبل در تالار برنامه نویسی توسط IMANAZADI (72 امتیاز)
+1 رأی
0 جواب میانگین بازدید روزانه 0.12307 بازدید
0 رأی
1 جواب میانگین بازدید روزانه 0.15393 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 1.584,165 بازدید
0 رأی
1 جواب میانگین بازدید روزانه 0.08208 بازدید
0 رأی
1 جواب میانگین بازدید روزانه 0.18474 بازدید
+1 رأی
1 جواب میانگین بازدید روزانه 0.27748 بازدید
کانال تلگرام جواب یاب
...