在我的网站上，我有一个标题(这是背景图像)，其下方有一个导航栏。我喜欢标题和导航栏填充 100% 的屏幕高度。 如果我将标题的高度更改为 80% 或类似的高度，则它仅适用于某些桌面尺寸。在较大的内容上，您可以看到导航栏下方的内容区域，在较小的内容上，只能看到导航栏的一部分。
我认为应该可以通过 JavaScript 一起定义标题和导航栏的大小(标题+导航栏=高度 100%)。问题是，我以前从未真正使用过 JavaScript，也找不到可以做到这一点的代码。
有人知道如何做到这一点吗？
最佳答案
// 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>关于javascript - 通过 JavaScript 设置 2 个 div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38969149/