如何使元素成爲瀏覽器窗口的高度？

我已經編寫了代碼來使一個部分的高度（#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:[email protected]">Email us</a> 
</section> 

<footer> 
    <div class="info"> 
    <div>Address</div> 
    <div>Phone number</div> 
    <div>[email protected]</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; 
}

來源

2014-10-03 AnnaBlabber

您是否反對使用'$（document）.height（）'而不是'$（window）.innerHeight（）'出於任何原因？ – helllomatt 2014-10-03 23:45:37

@aelieo不是'$（document）.height（）'整個頁面的高度？所以，如果它是一個長的單頁滾動條，'$（document）.height（）'可能是6000px？ – AnnaBlabber 2014-10-03 23:48:19

你說得對。傻我。 – helllomatt 2014-10-03 23:57:53

我多一點玩了一圈，發現它工作的情況下儘量使用jQuery（查找窗口的高度，沒有它增加成爲一個荒謬的數字）。

將$(window).innerHeight()更改爲window.innerHeight，它也會像你想要的那樣工作。

來源

2014-10-03 23:57:34 helllomatt

哇。我會在一百萬年內從未想到這一點。謝謝！：D – AnnaBlabber 2014-10-04 00:03:48

@AnnaBlabber不客氣！ – helllomatt 2014-10-04 00:20:48

$("#home").css("height", "100vh");

這將其設置爲視口高度的100％。

UPDATE

vh現可支持移動http://caniuse.com/#feat=viewport-units

來源

2014-10-03 23:42:01 Zze

不幸的是，這在移動Safari上不受支持，而且它非常適合iPhone。 – AnnaBlabber 2014-10-03 23:43:56

你見過這個網站的解決方法嗎？ http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html – Zze 2014-10-03 23:50:21

剛剛檢查出來。很有趣的帖子:)肯定會使用下一次我必須使用視口單位！ – AnnaBlabber 2014-10-04 00:02:38

使用HTML DOM clientHeight和clientWidth。它跨瀏覽器更快更一致。

function fitHomeToScreen(){ 
     document.getElementById("home").style.height = document.body.clientHeight; 
} 
window.onresize = fitHomeToScreen; // $(window).resize 
document.addEventListener("DOMContentLoaded", fitHomeToScreen); // $(document).ready(function() {...}); 
window.onload = fitHomeToScreen; // $(window).onload

其實根本就是you might not need jquery。

來源

2014-10-06 18:54:21

如何使元素成爲瀏覽器窗口的高度？

回答

相關問題