我已经编写了代码来使一个部分的高度 (#home) 与窗口高度相匹配，但它出现了错误。
这是我使用的:
// Make Home section height of window
function fitHomeToScreen() {
var windowHeight = $(window).innerHeight();
$("#home").css("height", windowHeight);
alert(windowHeight);
}
$(window).load(fitHomeToScreen);
$(window).resize(fitHomeToScreen);
每次我刷新浏览器(无论我将浏览器拖动到什么尺寸)，windowHeight 都保持不变。然后，如果我稍微调整浏览器窗口的大小，windowHeight 就会加倍。每次。永远。像这样:
902px [将浏览器拖宽几个像素] 1804px [将浏览器拖宽几个像素] 3608 ...等等...
这是我所有的代码:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<section id="main-menu">
<a href="#home" class="logo"></a>
<nav>
<ul>
<li><a href="#whatwedo">What we do</a></li>
<li><a href="#howitworks">How it works</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</section>
<section id="home">
<div class="content">
<div class="headline">Headline.</div>
<div class="explanation">Blah blah blah.</div>
</div>
</section>
<section id="whatwedo">
<h2>What we do</h2>
<div class="explanation">Some stuff</div>
</section>
<section id="howitworks">
<h2>Lorem ipsum</h2>
<div class="explanation">Some stuff</div>
</section>
<section id="team">
<h2>Lorem ipsum</h2>
<ul class="team">
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
<li class="modal-trigger" data-modal="name">
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
</li>
</ul>
<!-- Team member modals -->
<div class="modal team-member name">
<img class="x" src="images/x.svg" alt="Close" />
<img src="images/name.jpg" alt="Firstname Lastname" />
<div class="name">Firstname Lastname</div>
<div class="title">Title</div>
<p>Some stuff</p>
</div>
</section>
<section id="contact">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet</p>
<a class="button" href="mailto:info@company.com">Email us</a>
</section>
<footer>
<div class="info">
<div>Address</div>
<div>Phone number</div>
<div>info@company.com</div>
</div>
<div class="legal">Lorem ipsum</div>
</footer>
<div class="modal-backdrop"></div>
<script type="text/javascript">
// ------ Make modal work
$(".modal-trigger").click(function() {
var modalName = $(this).attr( "data-modal" );
var modal = ".modal." + modalName;
// Center modal
var modalHeight = $(modal).outerHeight();
var modalWidth = $(modal).outerWidth();
$(modal).css({
"margin-top" : (modalHeight/2)*-1,
"margin-left" : (modalWidth/2)*-1,
});
$(modal).fadeIn();
$(".modal-backdrop").fadeIn();
function collapseModal() {
$(modal).fadeOut();
$(".modal-backdrop").fadeOut();
}
$(".modal-backdrop").click(collapseModal);
$(".x").click(collapseModal);
});
// ------ When an anchor link is clicked, smoothly scroll there, and remove the URL hash
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 600);
return false;
}
}
});
});
// ------ Make Home section at least height of window
function fitHomeToScreen() {
var windowHeight = $(window).innerHeight();
$("#home").css("height", windowHeight);
alert(windowHeight);
}
$(window).load(fitHomeToScreen);
$(window).resize(fitHomeToScreen);
// ------ Vertically center Home section content
function centerHomeContent() {
var homeContentHeight = $("#home .content").outerHeight();
var homeContentWidth = $("#home .content").outerWidth();
$("#home .content").css({
"margin-top" : (homeContentHeight/2)*-1,
"margin-left" : (homeContentWidth/2)*-1,
});
}
$(window).load(centerHomeContent);
$(window).resize(centerHomeContent);
</script>
</body>
</html>
CSS
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End CSS reset */
/* Basic styles */
body {
font-family: Lato;
font-weight: 300;
font-size: 18px;
color: #222;
text-align: center;
}
a {
text-decoration: none;
}
h2 {
font-size: 60px;
}
p {
line-height: 160%;
font-size: 20px;
}
.explanation {
font-size: 28px;
line-height: 160%;
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
background-color: #fff;
z-index: 99999;
}
.modal-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
}
.modal .x {
width: 20px;
height: 20px;
}
/* Section - Main menu */
#main-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: red;
z-index: 9999;
padding: 0 30px;
box-sizing: border-box;
text-align: left;
}
#main-menu a {
color: #fff;
}
#main-menu .logo {
display: inline-block;
width: 336px;
height: 40px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
margin-top: 10px;
}
#main-menu nav {
float: right;
}
#main-menu nav ul li {
display: inline-block;
margin: 0 0 0 30px;
}
#main-menu nav ul li a {
letter-spacing: .05em;
font-size: 16px;
display: table-cell;
vertical-align: middle;
height: 60px;
-webkit-transition: ease-in-out .15s;
-moz-transition: ease-in-out .15s;
-o-transition: ease-in-out .15s;
transition: ease-in-out .15s;
}
#main-menu nav ul li a:hover {
box-shadow: inset 0 -4px 0 0 white;
}
/* Section - Hero */
#home {
display: block;
position: relative;
width: 100%;
background: black;
color: white;
}
#home .content {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
}
#home .headline {
font-size: 60px;
margin-bottom: 30px;
}
最佳答案
我又玩了一会儿，发现它在不使用 jQuery 的情况下效果最好(用于查找窗口高度而不用它添加成为一个荒谬的数字)。
将 $(window).innerHeight() 更改为 window.innerHeight，它也会像您希望的那样工作。
关于javascript - 如何使元素成为浏览器窗口的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26188162/