I have found this website:
/
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. Try resizing your browser...this div will always fill it up and allow you to scroll down to content that immediately follows it.
I'm wanting to achieve the same effect. Any ideas on what the best way to go about achieving this would be? I'm assuming some Javascript would be involved?
Thanks alot.
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. Try resizing your browser...this div will always fill it up and allow you to scroll down to content that immediately follows it.
I'm wanting to achieve the same effect. Any ideas on what the best way to go about achieving this would be? I'm assuming some Javascript would be involved?
Thanks alot.
Share Improve this question asked Aug 26, 2014 at 15:01 ForrestForrest 1072 gold badges4 silver badges16 bronze badges 1- Have you tried anything yourself? I don't see any reason why setting the height and width to 100% on your div would not work, as long as you also have your html and body set to 100% height and width as well. – Tricky12 Commented Aug 26, 2014 at 15:06
4 Answers
Reset to default 3One of those 2 should do the job, just in CSS.
div{
height:100%;
}
OR
div{
height:100vh;
}
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>
<div class="content">
Div content
</div>
Some other content down here.
</body>
</html>
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 ...
The particular website uses JavaScript to achieve this effect.
Below I include the basics of what they are doing:
<header class="winsize" style="background:#ff0000;">
...
</header>
<script type="text/javascript">
$.fn.windowHeight = function() {
return this.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.