Auto height div with javascript or css

Question

On this page here enter link description here you see the right sidebar,i would like this column has the same height as the main central column. I think this requires javascript or css but I do not know how. This is a Joomla CMS but i can add some code in a module.

Thanks.

Try solving the problem with CSS, first. Maybe you should take a look at some tutorials like this one: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started — RhinoDevel, Jul 20 '15 at 17:07
possible duplicate of [CSS - Expand child DIV height to parent's height](http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height) — Austin Schmidt, Jul 20 '15 at 17:27
Hello @alynioke I saw that you had removed your solution, why, this was usefull for me ? — Laurent, Jul 21 '15 at 18:46

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

You don't need JavaScript or JQuery at all. You can fix this with some CSS. An almost identical question is answered here:

CSS - Expand float child DIV height to parent's height

edited May 23 '17 at 10:26

Community

1
1

answered Jul 20 '15 at 17:14

Austin Schmidt

316
1
13

Good answer. I'm not certain this solution would work if the right column content exceeds the left column content. The solution I posted should work in either context. – Ryan Neuffer Jul 20 '15 at 17:23
Yes this solution don't work if the right column content exceeds the center column – Laurent Jul 21 '15 at 08:32

score 1 · Accepted Answer · answered Jul 20 '15 at 17:14

You can solve this with CSS alone, using a faux-column technique, here is a demo: https://jsfiddle.net/1r8xygnL/. I updated the id's and CSS below to reflect the id's on the page you linked to.

<div id="main">
    <div class="faux-col-right"><!-- this is just for the background //--></div>

    <div id="center">
    <!-- center column content goes here //-->
    </div>

    <div id="right">
    <!-- right column content goes here //-->
    </div>
</div>

#main {
    position: relative;
    overflow: auto;
    zoom: 1;
}

.faux-col-right {
    background: #cccccc;
    position: absolute;
    left: 69.047619047619%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

#right {
    width: 30.952380952381%;
    float: left;
    position: relative;
    z-index: 2;
}

#center {
    width: 69.047619047619%;
    float: left;
}

Hello your solution is the better but if like on this page http://bit.ly/1RK5Dzy there is no left column, it is a problem. — Laurent, Jul 21 '15 at 09:12

score 0 · Answer 3 · answered Jul 20 '15 at 17:06

0

You can use javascript. This page includes jQuery. So add this to your page

<script>
$(function(){
  jQuery('#right .inner').
  css('height', jQuery('#center .inner').height())
})

You have to use the inner_element. Because the background is applied to inner. If we change the height of $('#right'), you will not see it.

answered Jul 20 '15 at 17:06

Aminadav Glickshtein

23,232
12
77
117

Hello, thanks but this don't work. – Laurent Jul 20 '15 at 17:22

score 0 · Answer 4 · answered Jul 20 '15 at 17:06

0

Yes, you can do it using jquery, You can use .height() to get the height of min content

$(document).ready(function(){
  var mainHeight = $('#center').height();
  alert(mainHeight);
});

answered Jul 20 '15 at 17:06

Bhavin Solanki

4,740
3
26
46

Thanks i try to add this code on the page but this don't work. – Laurent Jul 20 '15 at 17:18

Auto height div with javascript or css

4 Answers4