Установить высоту 2 div с помощью JavaScript

на моем сайте У меня есть заголовок (который является фоновым изображением) и под ним навигатор. Мне нравится заголовок и навигатор, чтобы заполнить 100% высоты экрана. Если я изменяю высоту заголовка до 80% или что-то вроде этого, он работает только на определенных размерах рабочих столов. На больших можно увидеть область содержимого под навигационной панелью или на меньших - только часть навигационной панели.Установить высоту 2 div с помощью JavaScript

Я понял, что должно быть возможно определить размер заголовка и навигатора вместе с помощью JavaScript (заголовок + navbar = высота 100%). Проблема в том, что я никогда не работал с JavaScript раньше и не мог найти код, который бы это сделал.

Есть ли у кого-нибудь идеи, как это сделать?

источник

2016-08-16 schnitzel

Это должно быть сделано в CSS –

Попробуйте использовать vh в своем CSS вместо%. – niandrei

вы можете использовать CSS и JavaScript, как это и для вашей навигационной панели и ваш заголовок:

@media screen and (max-width:680px) { 
    ul.navbar li:not(:first-child) {display: none;} 
    ul.navbar li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens */ 
@media screen and (max-width:680px) { 
    ul.navbar.responsive {position: relative;} 
    ul.navbar.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.navbar.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.navbar.responsive li a { 
    display: block; 
    text-align: left; 
    } 
}

затем использовать этот скрипт:

function myFunction() { 
    var x = document.getElementById("IdOfnavbar"); 
    if (x.className === "navbar") { 
     x.className += " responsive"; 
    } else { 
     x.className = "navbar"; 
    } 
}

Внешний источник: http://www.w3schools.com/howto/howto_js_topnav.asp

источник

2016-08-16 07:52:30 Simo

Спасибо за помощь! но я не вижу, где именно это помогает мне определить высоту navbar-height + height-height = размер экрана? Сама панель навигации отлично работает в ответном режиме, и заголовок доступен только на рабочем столе и скрыт в очень маленьких размерах экрана. Можете ли вы объяснить это мне немного подробнее? – schnitzel

Вы можете настроить стиль в зависимости от размера экрана, используя максимальную ширину или минимальную ширину, чтобы любой размер экрана, который вы уже ожидали, в коде css. – Simo

есть много документов о медиа-запросах, надеюсь, вы найдете здесь более качественные ответы, вот внешний источник, который мне очень помог: https: //developer.mozilla.org/en-US/docs/Web/ CSS/Media_Queries/Using_media_queries – Simo

Вы можете установить высоту любого элемента, используя следующую инструкцию.

document.getElementById('id').style.height = "100px";

Вы можете использовать вышеуказанный фрагмент кода и можете добавить свою логику и выполнить код при загрузке страницы.

источник

2016-08-16 07:44:12 Ruhul

// jQuery solution 
 
// --------------- 
 
/*$(function() { 
 
    $(window).on('load resize', function() { 
 
    // set header height minus nav height 
 
    $('header').height($(this).height()-$('nav').height()); 
 
    }); 
 
});*/ 
 

 

 
// vanillaJS 
 
// --------- 
 
// calculate height of header 
 
/*var calculateHeight = function() { 
 
    document.querySelector('header').style.height = window.innerHeight- document.querySelector('nav').clientHeight+'px'; 
 
} 
 

 
// add event listener to window 
 
window.addEventListener('load', calculateHeight); 
 
window.addEventListener('resize', calculateHeight);*/ 
 

 
$(function() { 
 
    var $nav = $('nav'), 
 
     $header = $('header'), 
 
     $content = $('.content'), 
 
     navOffsetTop = 0; 
 

 
    $(window).on('load resize', function() { 
 
    // set header height minus nav height 
 
    $header.height($(this).height()-$nav.height()); 
 
    navOffsetTop = $nav.offset().top; 
 
    }); 
 

 

 
    $(window).on('scroll', function() { 
 
    if($(this).scrollTop() >= navOffsetTop) { 
 
     if(!$nav.hasClass('fixed')) { 
 
     $nav.addClass('fixed'); 
 
     $content.css({ 
 
      marginTop: $nav.height() 
 
     }) 
 
     } 
 
    } else { 
 
     if($nav.hasClass('fixed')) { 
 
     $nav.removeClass('fixed'); 
 
     $content.removeAttr('style') 
 
     } 
 
    } 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
} 
 
header { 
 
    background: url('https://unsplash.it/1200/1200'); 
 
    background-size: cover; 
 
} 
 
nav { 
 
    background-color: #ddd; 
 
    height: 60px; 
 
} 
 
nav.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    transition: all .3s; 
 
    background-color: #999; 
 
} 
 
.content { 
 
    padding: 30px; 
 
    height: 900px; 
 
} 
 
.content.scrolled { 
 
    padding-top: 60px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <header></header> 
 
    <nav></nav> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quae, aliquam autem incidunt delectus consequatur accusamus quibusdam adipisci facilis sapiente praesentium. Error quibusdam officiis perferendis, eius saepe hic dolores atque! 
 
    </div> 
 
</body> 
 
</html>

источник

2016-08-16 07:52:58 Phil

Спасибо за ваш ответ! это отлично работает в теории (и именно то, что я ищу!), но как-то не с моим проектом. Проблема заключается в том, что я использую аффикс navbar (который остается сверху при прокрутке вниз). Я попытался внедрить ваш код. Но в результате я получаю .affix-top (мой аффикс-навигатор имеет другой цвет, когда прокручивается и крепится серым тоном, установленным сверху, но здесь он фиксируется и краснеет - цвет, который он должен иметь при прокрутке) в качестве фиксированной навигационной панели сверху и заголовок отсутствует. У вас есть идея, как это исправить? – schnitzel

Ok,

Я использовал решение CSS с настройкой vh вместо% на заголовок и навигатор. Это не решение претензий (с точки зрения дизайнеров), так как на больших экранах он убирает навигатор уродливо. Я собираюсь попробовать и прочитать больше о java-скрипте, но пока работает высота vh! Спасибо всем!

источник

2016-08-16 11:25:22 schnitzel

Установить высоту 2 div с помощью JavaScript

ответ

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