Question

我编写的代码使得某个部分的高度（#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;
}

Answer 1

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

这会将其设置为视口高度的100％。

<强>更新

移动http://caniuse.com/#feat=viewport-units

现在支持

vh

Answer 2

我更多地玩了一遍，发现它在没有使用jQuery的情况下效果最好（用于查找窗口高度而不添加它成为一个荒谬的数字）。

将$(window).innerHeight()更改为window.innerHeight，它也会像你想要的那样工作。

Answer 3

使用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。

如何将元素设置为浏览器窗口的高度？

3 个答案: