2013-12-24 3 views
-2

Как сделать черный ящик достигать полной высоты?Как увеличить размер фона?

trulyamped.com/dropit

При нажатии на кнопку выпадающего списка, я хочу, чтобы весь фон, чтобы быть черным. Я пробовал делать высоту: 100% с положением: abosulute, но он, похоже, не работает. Пожалуйста, дайте мне знать, как обойти это. Кроме того, дополнительный бонус, если вы хотите помочь с ним, также создает анимацию, чтобы элементы на навигаторе появлялись с небольшой задержкой и затуханием. Благодаря

Я хочу, чтобы выглядеть так, как МЕНЮ/Навигация по www.domanistudios.com/mobile/

+0

Обеспечить JSFiddle, пожалуйста. – Cilan

ответ

0

Вы можете использовать jQuery, чтобы найти высоту окна браузера, а затем вы можете применить эту высоту к элементу ul. Простой пример для этого

скрипки: http://jsfiddle.net/8hKEd/

<html> 
<head> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $('#clickme').click(function(){ 
       $('#showme').css({'height' : $(window).height()}); 
       $('#showme').slideToggle('slow'); 


      }); 

     }); 
</script> 
</head> 
<body> 

<a id="clickme" href="#">Click Me</a> 

<ul id="showme" style="display:none; background-color: #000; color: #fff;"> 
    <li> 
     Some Text 
    </li> 
    <li> 
     Some Text 
    </li> 
    <li> 
     Some Text 
    </li> 
    <li> 
     Some Text 
    </li> 
</ul> 
</body> 
</html> 
+0

безупречный. это закончило работать для меня спасибо. Но если я изменяю размер окна, то фон не совпадает, есть ли способ обновить его или постоянно корректировать до активной высоты?> – user3131374

+0

Причина, по которой фоновое изображение не изменяется правильно, заключается в том, что высота окна добавляется к ul, но уже существует некоторое пространство, которое используется тегом привязки в верхней части страницы. Что вы можете сделать, так это уменьшить высоту, применяемую к ul, например 65px, и это должно покрыть разницу в высоте, вызванную якорной меткой. Попробуйте изменить $ ('# showme'). Css ({'height': $ (window) .height()}); до $ ('# showme'). Css ({'height': $ (window) .height() - 65}); – Hemant

+0

http://trulyamped.com/dropit/ посмотреть там. Высота идеально подходит, но как только вы изменяете размер окна, высота больше не подходит для сайта. Вы видите, о чем я говорю? – user3131374

0

Вам нужно увеличить высоту ul, а не высоту body. body имеет высоту, основанную на элементах в ней. Увеличьте высоту ul menu класс до 1000px. Это должно дать вам то, что вам нужно.

.menu ul { 
    display: none; 
    height: 1000px; 
} 
+0

Да, я бы хотел, чтобы высота была на 100%. Я хочу, чтобы он настраивался на размер размеров браузера лиц. Любая идея как. – user3131374

Смежные вопросы