CODEWITHSUNDEEP
javascriptjquery
Daniel Kellaway
Daniel Kellaway

Reputation: 189

jQuery container Div height not expanding

I have used jQuery code to expand the height of Divs within a container. Here is the JSFiddle link.

However when resizing the browser width the Divs height is fixed and the text overflows the container. Can the following code be changed to expand the container height and Divs within it so that the text stays within?

jQuery code:

$(window).load(function () {
$(window).resize(function () {

    $(document).ready(function () {
        var heightArray = $(".container>div").map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(Math, heightArray);
        $(".container>div").height(maxHeight);
        $(".container>div").height(maxHeight);
    });

}).trigger('resize');
});

Style:

.container {
height: auto;
float:left; }

#half {
width:48%;
margin:0.5%;
padding:0.5%;
float:left;
background-color:#1589FF; }

HTML:

<div class="container">
<div id="half">
     <h1>About</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>

<div id="half">
     <h1>News</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.   
</div>
</div>

Upvotes: 0

Views: 373

Answers (3)

Mehdi Karamosly
Mehdi Karamosly

Reputation: 5438

You need to use offsetHeight instead of height take a look at this jsfiddle

$(window).load(function () {
    $(window).resize(function () {

        $(document).ready(function () {
            var heightArray = $(".container>div").map(function () {
                return $(this).offsetHeight ; //height();
            }).get();
            console.log(heightArray);
            var maxHeight = Math.max.apply(Math, heightArray);
            console.log(maxHeight);
            $(".container>div").height(maxHeight);
//            $(".container>div").height(maxHeight);
        });

    }).trigger('resize');
});

Upvotes: 1

sergioadh
sergioadh

Reputation: 1471

You are setting a fixed height when resizing the first time so you have to set height auto then resize the divs so they know what the desired size should be. Otherwise the max height you are getting is the fixed height you set the first time.

function resizeDivs() {
    var heightArray = $(".container>div").map(function () {
        return $(this).height();
    }).get();
    var maxHeight = Math.max.apply(Math, heightArray);
    $(".container>div").height(maxHeight);
    $(".container>div").height(maxHeight);
}

$(function () {
    resizeDivs();
});

$(window).resize(function () {
    $(".container>div").css('height', 'auto');
    resizeDivs();
});

jsfiddle

http://jsfiddle.net/XXxNe/11/

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

It can be easyly done by add 1 line of code, check this fiddle.

I added that line right when the resize function is called :

$(".container>div").height("");

It will set the height to auto and calcul will reset the right heigth.

Upvotes: 0

Related Questions