Форум

tolian_27 · #1 (**permalink**) 24.10.2010, 09:50

Добрый день. Есть следующая задача; верстка страницы приведена ниже.
Необходимо чтобы нижний блок (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>

Aetae · #2 (**permalink**) 24.10.2010, 10:16

Не что конца понятно, что должно происходить с block_bottom если высота окна браузера больше main но промежуток между main и низом меньше block_bottom: видна частично нижняя часть, видна частино верхняя часть, не виден пока не будет достаточно места, виден сразу весь внахлёст на main?

В любом случае проблема вроде решаема на чистом html+css.

monolithed · #3 (**permalink**) 24.10.2010, 10:43

<style type="text/css">

#main {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 200px;
}
       
#bottom {    
    background: red;
    margin-top: 100px;
    width: 100px;
    height: 100px;
}
</style>

<div id="main">
     <div id="bottom"></div>      
</div>  

<script type="text/javascript">
window.onload = function(){
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none';
};
</script>

tolian_27 · #4 (**permalink**) 24.10.2010, 10:49

В этом случае должна быть видна только (верхняя) часть блока block_bottom. (т.е. та которая "показалась" в окне браузера). Если все равно несовсем понятно могу зарисовать.

Да нет на чистом html+css скорее всего не сделаешь, я не у одного человека уже интересовался (кто очень хорошо в верстке шарит), мне сказали что с низу только скриптами. (Слева и справа это работает без проблем на css+html, снизу - нет)

tolian_27 · #5 (**permalink**) 24.10.2010, 11:01

monolithed, Дружище, объясни пожалуйста что означает строчка -

window.onload = function(){
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none';
};

monolithed · #6 (**permalink**) 24.10.2010, 11:21

Сообщение от tolian_27

monolithed, Дружище, объясни пожалуйста что означает строчка -

window.onload = function(){ //если JS код расположен после html кода
     document.getElementById('bottom').style.display = (window.screen.height > 200) ? 'block' : 'none'; //если высота экрана больше 200px (соответствует #main), то блок #bottom - показывается, если меньше то скрывается
};

в твоем случае нужно заменить class="block block_bottom" и ,block block_bottom на id="block_bottom" и #block_bottom и высоту указать равную 900

tolian_27 · #7 (**permalink**) 24.10.2010, 11:29

Блин я чо то делаю не так или фиг знает, - у меня не работает(( т.е. всмысли нижний блок все равно отображается

monolithed · #8 (**permalink**) 24.10.2010, 11:45

<!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>

tolian_27 · #9 (**permalink**) 24.10.2010, 12:50

Спасибо! + в репу
Правда строку (почему то он ее не понимает)
block_bottom.style.display = (window.screen.height > main.offsetHeigh) ? 'block' : 'none'
я заменил на
if(main.offsetHeight < window.screen.height) block_bottom.style.display ='block'
else block_bottom.style.display ='none'; - все как надо работает.

Блин все ничего - вот только при масштабировании не работает - если уменьшить масштаб - блок все равно не появляется. Надо наверно заместо window.screen.height другую переменную? или вообще что-то нето(((

tolian_27 · #10 (**permalink**) 25.10.2010, 00:26

Сообщение от tolian_27

Блин все ничего - вот только при масштабировании не работает - если уменьшить масштаб - блок все равно не появляется. Надо наверно заместо window.screen.height другую переменную? или вообще что-то нето(((

monolithed, - не знаешь как можно обойти это?, (хотя бы просто на мысль навести)

Форум

Справочник

Discord чат

Курсы javascript