Auto-Resize div

Div that resizes to fit inside available space

by Malin Jayakody

HTML

<div>
    gfghfg hjghjvhjvhjvhjv hvhjvhjvhj vhj vhj vhj v
</div>
<div>
    gfghfg hjghjvhjvhjvhjv hvhjvhjvhj vhj vhj vhj v
</div>
<div>
    <div class="prefix">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis sapien sit amet tellus placerat dictum. Maecenas eu erat tempus, faucibus nisi non, mollis sem. Morbi felis nibh, porta nec vestibulum ut, tempor id mauris. Vestibulum ipsum turpis, dapibus
        sed enim ac, condimentum vehicula ipsum. Maecenas dictum tellus erat, pharetra varius sem efficitur in. Sed vitae ex ultrices, convallis dui rutrum, varius libero. Pellentesque gravida mauris et ipsum lobortis pulvinar. Donec hendrerit tempus
        volutpat.
        <button id="hide">Hide</button>
    </div>
    <div class="suffix">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis rutrum neque quis bibendum. Mauris viverra diam sapien, eu pharetra ligula ullamcorper sed. In et semper leo. Quisque interdum nibh vitae placerat maximus. Mauris finibus purus
            nec lorem feugiat semper. Nullam accumsan sapien metus, nec lobortis justo lobortis et. Nunc in purus sit amet quam hendrerit interdum. Fusce vel placerat mi. Morbi placerat semper urna, vitae dictum metus posuere sit amet. Pellentesque ex
            odio, convallis tincidunt dolor et, scelerisque dignissim nisl. Sed a lacinia mi. Nulla tempus vehicula nibh, non consectetur libero placerat et. Nullam semper eget lacus vel tempor. Sed scelerisque aliquet dui, et bibendum metus placerat
            nec. Vivamus volutpat velit lectus. Suspendisse potenti. Fusce venenatis turpis vitae maximus feugiat. Ut tristique massa neque, sit amet ultricies ex varius eu. Pellentesque a pharetra risus. Nunc quam tellus, euismod a imperdiet vitae, molestie
            vitae risus. Nullam consequat, nisi in fermentum dictum, arcu arcu faucibus nibh, et porttitor lorem sapien nec elit. Maecenas nec finibus lorem. Nullam risus quam, laoreet...

CSS

.prefix {
    background-color: yellow;
    padding: 20px;
    margin-bottom: 20px;
}

.suffix {
    background-color: red;
    overflow: auto;
}

.suffix div {
    width: 700px;
}

JavaScript

jQuery(function($) {
    initSuffix();
    $(window).on('resize layoutUpdate', initSuffix);

    function initSuffix() {
        var item = $('.suffix');
        item.css('height', $(window).height() - item.offset().top - 10);
    }

    $('#hide').click(function() {
        $('.prefix').css({
            height: 50,
            overflow: 'hidden'
        });
        $(window).trigger('layoutUpdate')
    });
})