当我调整浏览器大小时，div 消失 window

Question

请多多包涵，我还是前端开发的初学者。我正在尝试使用 CSS 网格创建一个响应式网站，但现在卡住了，因为当我调整 window 大小时，我的“汉堡包”菜单和页脚一直在消失。我知道代码远非好，但我很沮丧，想请你帮忙。我应该以某种方式使用媒体查询来解决此问题还是其他问题？

非常感谢。

$(document).ready(function() {
  $(".hamburger_btn").click(function() {
    $(this).toggleClass("active");
    $(".hamburger_info").toggleClass("active");
  });
});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  box-sizing: border-box;
}

body {
  background: #0F1014;
  overflow: hidden;
}

.grid-container {
  display: grid;
  grid-template-columns: 0.5fr repeat(2, 1.5fr) 0.5fr;
  grid-template-rows: 0.5fr 2fr 0.5fr;
  grid-gap: 1px 1px;
  grid-template-areas: "header header header header" "leftbar main main rightbar" "footer footer footer footer";
}

.footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.1fr 0.9fr;
  grid-gap: 1px 1px;
  grid-template-areas: ". . ." "copyright copyright copyright";
  grid-area: footer;
  text-align: center;
  top: 150%;
  position: relative;
}

.copyright {
  grid-area: copyright;
  color: #ffffff;
}

.header {
  grid-area: header;
}

.leftbar {
  grid-area: leftbar;
}

.rightbar {
  grid-area: rightbar;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 0fr;
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1px 1px;
  grid-template-areas: "name menu ." "name menu .";
  grid-area: main;
}

.name {
  grid-area: name;
  width: 100vh;
  font-size: 5em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #fff;
  top: 35%;
  left: 25%;
}

.grid-container .main .hamburger_btn {
  width: 3.13em;
  height: 3.13em;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  position: relative;
  cursor: pointer;
}

.grid-container .main .hamburger_btn>div {
  position: absolute;
  top: 45%;
  left: 25%;
  width: 50%;
  height: 3px;
  background: #fff;
  border-radius: 3.13em;
  transition: all 0.3s linear;
}

.grid-container .main .hamburger_btn .one {
  top: 25%;
}

.grid-container .main .hamburger_btn .three {
  top: 65%;
}

.grid-container .main .hamburger_info {
  width: 10em;
  height: auto;
  margin: 0 auto;
  background: #fff;
  position: relative;
  opacity: 0;
  top: -10px;
  transition: all 0.5s linear;
}

.grid-container .main .hamburger_info ul li {
  text-align: center;
  text-transform: uppercase;
  transition: all 0.2s linear;
}

.grid-container .main .hamburger_info ul li a {
  padding: 0.63em;
  font-size: 12px;
  color: #757575;
  display: block;
  transition: all 0.2s linear;
}

.grid-container .main .hamburger_info ul li:hover {
  background: #c62020;
}

.grid-container .main .hamburger_info ul li:hover a {
  color: #fff;
}

.grid-container .main .hamburger_info:before {
  content: "";
  position: absolute;
  top: -1.19em;
  left: 50%;
  transform: translateX(-50%);
  border-top: 0.63em solid transparent;
  border-bottom: 0.63em solid #fff;
  border-left: 0.63em solid transparent;
  border-right: 0.63em solid transparent;
}

.grid-container .hamburger_btn.active {
  transform: rotate(90deg);
}

.grid-container .hamburger_btn.active .one {
  top: 45%;
  left: 25%;
  transform: rotate(45deg);
}

.grid-container .hamburger_btn.active .two {
  opacity: 0;
}

.grid-container .hamburger_btn.active .three {
  top: 45%;
  left: 25%;
  transform: rotate(-45deg);
}

.grid-container .main .hamburger_info.active {
  opacity: 1;
  top: 0px;
}

.fa {
  padding: 1.25em;
  font-size: 1.88em;
  width: 5em;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
  background: #c62020;
  color: #ffffff;
}

.fa-facebook {
  position: relative;
  left: 80%;
  background: #0F1014;
  color: #ffffff;
}

.fa-instagram {
  background: #0F1014;
  color: #ffffff;
}

.fa-envelope-o {
  position: relative;
  right: 80%;
  background: #0F1014;
  color: #ffffff;
}

<!DOCTYPE html>
<html>

<head>
  <title>Learning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="grid-container">
    <div class="footer">
      <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
      <a href="contact.html" class="contact"><i class="fa fa-envelope-o"></i></a>
      <div class="copyright">Copyright © 2020, NAME. All rights reserved.</div>
    </div>

    <div class="header"></div>
    <div class="leftbar"></div>
    <div class="rightbar"></div>

    <div class="main">
      <div class="name">
        <header>NAME</header>
      </div>
      <div class="menu">
        <div class="hamburger_btn">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
        </div>
        <div class="hamburger_info">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="experience.html">Experience</a></li>
            <li><a href="design.html">Graphic Design</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

    .name {
      width: 100vh; /* Remove this */
    }
    .hamburger_btn {
      float:right; /* If you want it to go right */
    }

当我调整浏览器大小时，div 消失 window

Divs disappearing when I resize the browser window

html

css

css-grid

responsive