How can I make the .Bck div stretch to the full height of the browser window? I attempted using jQuery, but the height doesn't adjust correctly when I resize the window. What is wrong with my JavaScript and can this be achieved with CSS alone?
<!-- language-all: lang-html -->
<!DOCTYPE html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="http://www.iconight.it/js/jquery1_11_0.js"></script>
<script>
`window.jQuery`(document).ready(function(){
`window.jQuery`('.Bck').css('height', `window.jQuery`(document).height());
});
`window.jQuery`(window).bind("resize", function(){
`window.jQuery`('.Bck').css('height', `window.jQuery`(document).height());
});
</script>
<style>
body {
margin: 0px;
font-family: arial;
font-size: 13px;
background: #000 url("http://fc01.deviantart.net/fs15/i/2007/059/3/7/Drawing_Surface_Paper_Texture_by_Enchantedgal_Stock.jpg");
color: #FFF;
}
.Bck {
background-image: radial-gradient(ellipse at center, transparent -100%, #000 100%);
height: 100%;
}
#Section{
text-align: center;
width: 100%;
margin: 0px auto;
}
#Footer {
text-align: center;
padding: 50px 0px;
width: 100%;
overflow: hidden;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
</style>
<head>
<body>
<div class='Bck'>
<div id='Section'>Hello world</div>
<div id='Footer'>aaa</div>
</div>
</body>
</html>