我的網站上有一個標題（這是一個背景圖像），並在其下方有一個導航欄。我喜歡標題和導航條來填充屏幕高度的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