Добрый день. Есть следующая задача; верстка страницы приведена ниже.
Необходимо чтобы нижний блок (block_bottom) был виден только в том случае если высота окна браузера больше высоты главного контейнера ".main", в ином случае этот блок не виден (для примера вставил block_right - блок справа он работает так как и нужно). Каким образом можно сделать это через JavaScript? Заранее благодарю.
|
Код:
|
<!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 class="main">
<div class="block block_right"></div>
<div class="block block_bottom"></div>
<p>
text text text
</p>
</div>
</div>
</body>
</html> |