<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrapper {
height: auto;
overflow: hidden;
padding-bottom: 50px;
position: absolute; left: 0; top: 0; bottom: auto; right: 0;
}
#main {
position: relative;
width: 980px;
height: 900px;
margin: 0 auto;
padding: 10px;
background: gray;
}
.block_right {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
right: -100px;
}
#block_bottom {
width: 200px;
height: 100px;
margin-left: -100px;
background: red;
position: absolute;
bottom: -100px;
left: 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="main">
<div class="block_right"></div>
<div id="block_bottom"></div>
<p>
text text text
</p>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var block_bottom = document.getElementById('block_bottom');
var main = document.getElementById('main');
block_bottom.style.display = (window.screen.height > main.offsetHeigh) ? 'block' : 'none';
};
</script>
</body>
</html>