Div占据了身体一半的高度和宽度

Question

我需要创建一个看起来像这样的网站：https://drive.google.com/file/d/1bvV7UFjC_lg6QdNeTK7Er_chQqwfPmny/view?usp=sharing 现在看起来有点像那个，但是第一个div（带有背景图像的div）不会占据视口的高度和宽度的一半。关于如何解决该问题的任何想法？

屏幕截图：

HTML：

<div id="main-menu">
        <p id="invitation_title">
          Escapate a
          </p>
        <p id="city_title">Nueva York</p>
        <Menu />
        <FlightSelector />

      </div>

CSS

#main-menu{
  text-align:center;
  background-image: url('http://hdwpro.com/wp-content/uploads/2018/02/new-york-background-image.jpg');
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:100%;
}

Answer 1

如果您希望背景图像占据整个页面，则可以像这样设置视口的高度：

#main-menu {
    height: 100vh;
}

这里的链接详细说明了视口：

https://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units