fullscreen div that grows with content

[menosketiago]

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?

[Senff]

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

[menosketiago]

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

[menosketiago]

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 ;)

[menosketiago]

OK

I think overflow:auto sorted that one also :D

[Author]

Posts