How To Have A Div Always Fill The Viewport (fully Responsive) With Content Immediately Following It?
I have found this website: http://tocka.co/ When you load it up, you will see the red background with the text inside. This takes up your entire screen and then you can scroll down
Solution 1:
One of those 2 should do the job, just in CSS.
div{
height:100%;
}
OR
div{
height:100vh;
}
Solution 2:
You need to set your html, body and div elements to 100% heights.
html, body, div.content { width:100%; height:100%; margin:0; }
After that, any further content will appear below.
<html><body><divclass="content">
Div content
</div>
Some other content down here.
</body></html>Solution 3:
to dynamically change it via js, u may use this one
$(window).resize(function () {
var currentViewPortHeight = $(window).height();
var currentViewPortWidth = $(window).width();
$("#myViewportDiv").css({
"height": currentViewPortHeight
}, {
"width": currentViewPortWidth
});
});
but since the window.resize event triggers quite often, build in a timeout interval like 300ms ...
Solution 4:
The particular website uses JavaScript to achieve this effect.
Below I include the basics of what they are doing:
<headerclass="winsize"style="background:#ff0000;">
...
</header><scripttype="text/javascript">
$.fn.windowHeight = function() {
returnthis.each(function() {
var windowsize = $(window).height();
$(this).height(windowsize);
});
};
$(document).ready(function() {
$('.winsize').windowHeight();
$(window).resize(function() {
$('.winsize').windowHeight();
});
});
</script>On load, the area is given the same height as the window, and every time it is resized, it is done again.
Post a Comment for "How To Have A Div Always Fill The Viewport (fully Responsive) With Content Immediately Following It?"