Grow your CSS skills. Land your dream job.

fullscreen div that grows with content

  • # June 21, 2013 at 9:43 am

    Hi there,

    I’m making my personal folio with a one pagish design, I need the section divs to be at least the browser window height but in some sections the content will make the div expand.

    I’ve achieved the fullbrowser with

    $(document).ready(function(){
    resizeDiv();
    });

    window.onresize = function(event) {
    resizeDiv();
    }

    function resizeDiv() {
    vpw = $(window).width();
    vph = $(window).height();
    $(‘.fullheight’).css({‘height’: vph + ‘px’});
    }

    But I’m having trouble with expanding the div with content… I’m guessing I need some sort of an “if” function on the JS but I’m not that good with jscript =X

    Here’s my working site so you can get a feel of what I’m talking about (note the work section cropping thumbs) > http://menosketiago.com/mock.html

    Any ideas?

    # June 21, 2013 at 10:55 am

    So the div needs to be full height, but if there is more content in it, it needs to be larger?

    I think replacing “height” with “min-height” should do the trick already: http://codepen.io/senff/pen/leowk

    # June 21, 2013 at 11:11 am

    Hi Senff,

    As I recall this JS snippet was yours anyways :D

    I already tried min-height instead but the problem persists =X

    You can recheck > http://menosketiago.com/mock.html

    # June 21, 2013 at 11:32 am

    Ah!

    I think I figured the trick!

    I just gave a clear:both; style to the jquery changable class and it now expands.

    Only bug is that the div background is not expanding with the div but I’ll try to work around it :D

    Thanks mate ;)

    # June 21, 2013 at 11:49 am

    OK

    I think overflow:auto sorted that one also :D

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".