- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › fullscreen div that grows with content
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?
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
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
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 ;)
OK
I think overflow:auto sorted that one also :D