Question

在移动屏幕尺寸下，尽管我使用css网格并正确设置了格式，但菜单栏并没有覆盖整个页面，仅覆盖了一半。单击菜单按钮后，由于某些选项不在屏幕上，因此它也无法正确显示导航区域。

我尝试添加溢出：隐藏在CSS的导航栏中，但这根本不能解决问题，它仍然只位于页面的一侧。

CSS：

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 10vh 5vh 12vh 5vh 58vh 10vh;
/*grid-gap: 6px; */
grid-template-areas:
"header  header"
"menu    menu"
"intro   intro"
"figure   figure"
"content content"
"footer  footer";
}

nav {
grid-area: menu;
display: none;
clear: both;
justify-content: center;
background: black;
flex-direction: column;
}

nav a {
padding: 1.25em 1.5em;
color: white;
background: darkred;
text-decoration: none;
transition: all 1.5s;
border-right: 1px solid white;
border-left: 1px solid white;
}  

.menu {
background: darkred;
text-align: center;
color: white;
line-height: 2em;
} 

.menu-toggle {
display: flex;
}

HTML：

<body class="grid">
<div class="menu" id="menu-toggle">MENU</div>
<nav id="menu-nav">
<a href="index.html">HOME</a>
<a href="news.html">NEWS</a>
<a href="teamhistory.html">TEAM HISTORY</a>
<a href="gallery.html">GALLERY</a>
</nav>

在移动屏幕中，菜单栏可延伸到整个页面，但实际输出是它覆盖了一半的屏幕宽度。

Answer 1

那是因为您创建了一个包含两列的菜单，并将所有内容都放在左列，这就是占据屏幕50％的原因。您需要具有嵌套网格才能实现

.grid {
  display: grid;
  grid-gap: 10px;
}
.menu {
  width: 100%;
  background: darkred;
  text-align: center;
  color: white;
  line-height: 2em;
}
#menu-nav {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /*grid-gap: 6px; */
}

nav a {
  width: 100%;
  color: white;
  background: darkred;
  text-decoration: none;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>temp</title>
    <link rel="stylesheet" type="text/css" href="temp.css" />
  </head>

  <body class="grid">
    <div class="menu" id="menu-toggle">MENU</div>
    <nav id="menu-nav">
      <a href="index.html">HOME</a> <a href="news.html">NEWS</a>
      <a href="teamhistory.html">TEAM HISTORY</a>
      <a href="gallery.html">GALLERY</a>
    </nav>

    <script src="temp.js"></script>
  </body>
</html>

您要寻找的东西。

Answer 2

我不知道我是否理解正确，但是如果我理解正确，我认为您应该使用CSS中的width属性，并将其更改为要覆盖页面所有宽度的元素。

width: 100%;

我使用nav标签的菜单无法完全显示在页面上，只能显示在屏幕的一半

2 个答案: