我的网站上有一个标题（这是一个背景图像），并在其下方有一个导航栏。我喜欢标题和导航条来填充屏幕高度的100％。 如果我将标题的高度改为80％或类似的东西，它只适用于特定的桌面尺寸。在较大的那个上，您可以看到导航栏下面的内容区域，或者较小的内容区域只是导航栏的一部分。通过JavaScript设置2 div的高度
我觉得应该可以通过JavaScript（header + navbar = height 100％）将header和navbar的大小一起定义。问题是，我从来没有真正使用过JavaScript，也找不到能够做到这一点的代码。
有人有一个想法如何做到这一点？
你可以使用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";
}
}
感谢您的帮助！但我没有看到它在哪里帮助我定义navbar-height + header-height = screen size？导航栏本身在响应方面效果很好，并且标题仅在桌面上可见并隐藏在非常小的屏幕尺寸中。 你能解释一下对我更详细一点吗？ – schnitzel
您可以使用max-width或min-width来调整样式，具体取决于屏幕大小，以便您可以在CSS代码中预测的屏幕大小。 – Simo
有很多关于媒体查询的文件，我希望你能在这里找到更好的答案，这里有一个我非常有用的外部资源：https：//developer.mozilla.org/en-US/docs/Web/ CSS/Media_Queries/Using_media_queries – Simo
您可以使用以下语句设置任何元素的高度。
document.getElementById('id').style.height = "100px";
您可以使用上面的代码，并可以添加你的逻辑和执行应该在页面加载的代码。
// 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>感谢您的回答！这在理论上非常有用（而且正是我正在寻找的！），但不知道如何与我的项目。问题似乎是，我正在使用粘贴导航栏（在向下滚动时保持顶部）。我试图实现你的代码。但是结果我得到了.affix-top（我的词缀navbar在滚动时具有不同的颜色，并将灰色的wehen固定在顶部，但在这里它是固定的并且是红色 - 滚动时它应该具有的颜色）作为固定的导航栏在顶部和标题丢失。 你有一个想法如何解决它？ – schnitzel
好吧，
我使用CSS解决方案，将vh代替％设置为标题和导航栏。这不是漂亮的解决方案（从设计师的角度来看），因为在更大的屏幕上，它以一种丑陋的方式扩展了导航栏。 我要去尝试和阅读更多关于Java脚本，但现在的高度工作！ 谢谢大家！
这应该在CSS –
尝试在你的CSS而不是％使用vh。 – niandrei