文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在没有固定高度的导航栏后，如何设置导航菜单以填充剩余的垂直空间？

问在没有固定高度的导航栏后，如何设置导航菜单以填充剩余的垂直空间？
EN

Stack Overflow用户
提问于 2022-07-15 13:24:35
回答 1查看 32关注 0票数 0

我想使使菜单填补剩余的垂直空间，而不滚动。我试过的位置:绝对和高度，但似乎没有任何工作。有人有什么建议吗？也许我需要用不同的HTML结构吗？任何帮助都值得赞赏(：很抱歉，这个问题的格式很差，仍然是新出现的堆栈溢出。

下面是一个显示导航菜单功能的视频：

https://gyazo.com/809fcd5c6c665f37a9f467164404a297

以下是一幅图片：

​

​

下面是我的HTML、CSS和JS代码：

代码语言：javascript
复制
<body>
    <header class="header">
      <div class="header-section-1 flex flex-jc-sb flex-ai-c">
        <a href="#" class="company flex flex-ai-c">
          <div class="company-logo"></div>
          <div class="logo-text flex flex-d-col flex-ai-c">
            <p class="logo-text-main">punitham</p>
            <p class="logo-sub-text">disabiltiy service</p>
          </div>
        </a>

        <div class="menu-toggle flex flex-d-col flex-jc-sb">
          <span class="one bar"></span>
          <span class="two bar"></span>
          <span class="three bar"></span>
          <span class="four bar"></span>
        </div>
      </div>

      <div class="header-section-2">
        <a href="#" class="call-btn flex flex-jc-c flex-ai-c">
          <i class="fa-solid fa-phone"></i>
          <p class="ph-number">03 4561 2795</p>
        </a>
      </div>

      <nav class="navigation hidden">
        <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Careers</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <script src="./script.js"></script>
  </body>
代码语言：javascript
复制
.flex {
  display: flex;
}

.flex-jc-c {
  justify-content: center;
}

.flex-jc-sb {
  justify-content: space-between;
}

.flex-ai-c {
  align-items: center;
}

.flex-d-col {
  flex-direction: column;
}

.hidden {
  display: none;
}

.header {
  background-color: black;
  color: white;
}

.header-section-1 {
  width: 90%;
  margin: 0 auto;
  padding: 1.5em 0;
}

.company {
  color: white;
  text-decoration: none;
}

.company-logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: white;
  outline: 1px solid black;
  outline-offset: -5px;
}

.logo-text {
  margin-left: 10px;
}

.logo-text-main {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 1.7rem;
}

.logo-sub-text {
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: -10px;
}

.menu-toggle {
  height: 20px;
  width: 30px;
  cursor: pointer;
}

.bar {
  display: block;
  background-color: white;
  height: 3px;
  width: 100%;
}

.menu-toggle,
.one,
.two,
.three {
  transition-duration: 0.3s;
}

.menu-toggle.on {
  transform: rotate(45deg);
}

.menu-toggle.on .one {
  opacity: 0;
  /* transform: translateY(9px) rotate(90deg); */
}

.menu-toggle.on .two {
  opacity: 0;
  /* transform: translateY(3px); */
}
.menu-toggle.on .three {
  transform: translateY(-3px);
}

.menu-toggle.on .four {
  transform: translateY(-9px) rotate(90deg);
}

.header-section-2 {
  background-color: lightcoral;
  padding: 0.7em 0;
}

.call-btn {
  text-decoration: none;
  color: white;
}

.ph-number {
  font-weight: 600;
  margin-left: 10px;
}

.nav-list {
  list-style: none;
  background-color: lightblue;
  text-align: center;
}

.nav-link {
  font-weight: 100;
  text-decoration: none;
  display: block;
  color: white;
  font-size: 2rem;
  transition-delay: 0.4s;
  transition: 0.4s;
}

.nav-link:hover,
.nav-link:focus {
  color: lightcoral;
}
代码语言：javascript
复制
document.querySelector(".menu-toggle").addEventListener("click", function () {
  this.classList.toggle("on");
  const callBtn = document.querySelector(".header-section-2");
  callBtn.classList.toggle("hidden");
  const nav = document.querySelector(".navigation");
  nav.classList.toggle("hidden");
});
html
css
frontend
javascript
EN

回答 1

Stack Overflow用户

发布于 2022-07-15 13:35:05

只需在height: 100vh中添加.nav-list

代码语言：javascript
复制
  .nav-list {
      list-style: none;
      background-color: lightblue;
      text-align: center;
      height: 100vh;
    }

​

代码语言：javascript
复制
document.querySelector(".menu-toggle").addEventListener("click", function () {
  this.classList.toggle("on");
  const callBtn = document.querySelector(".header-section-2");
  callBtn.classList.toggle("hidden");
  const nav = document.querySelector(".navigation");
  nav.classList.toggle("hidden");
});
代码语言：javascript
复制
.flex {
  display: flex;
}

.flex-jc-c {
  justify-content: center;
}

.flex-jc-sb {
  justify-content: space-between;
}

.flex-ai-c {
  align-items: center;
}

.flex-d-col {
  flex-direction: column;
}

.hidden {
  display: none;
}

.header {
  background-color: black;
  color: white;
}

.header-section-1 {
  width: 90%;
  margin: 0 auto;
  padding: 1.5em 0;
}

.company {
  color: white;
  text-decoration: none;
}

.company-logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: white;
  outline: 1px solid black;
  outline-offset: -5px;
}

.logo-text {
  margin-left: 10px;
}

.logo-text-main {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 1.7rem;
}

.logo-sub-text {
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: -10px;
}

.menu-toggle {
  height: 20px;
  width: 30px;
  cursor: pointer;
}

.bar {
  display: block;
  background-color: white;
  height: 3px;
  width: 100%;
}

.menu-toggle,
.one,
.two,
.three {
  transition-duration: 0.3s;
}

.menu-toggle.on {
  transform: rotate(45deg);
}

.menu-toggle.on .one {
  opacity: 0;
  /* transform: translateY(9px) rotate(90deg); */
}

.menu-toggle.on .two {
  opacity: 0;
  /* transform: translateY(3px); */
}
.menu-toggle.on .three {
  transform: translateY(-3px);
}

.menu-toggle.on .four {
  transform: translateY(-9px) rotate(90deg);
}

.header-section-2 {
  background-color: lightcoral;
  padding: 0.7em 0;
}

.call-btn {
  text-decoration: none;
  color: white;
}

.ph-number {
  font-weight: 600;
  margin-left: 10px;
}

.nav-list {
  list-style: none;
  background-color: lightblue;
  text-align: center;
  height: 100vh;
}

.nav-link {
  font-weight: 100;
  text-decoration: none;
  display: block;
  color: white;
  font-size: 2rem;
  transition-delay: 0.4s;
  transition: 0.4s;
}

.nav-link:hover,
.nav-link:focus {
  color: lightcoral;
}
代码语言：javascript
复制
<body>
    <header class="header">
      <div class="header-section-1 flex flex-jc-sb flex-ai-c">
        <a href="#" class="company flex flex-ai-c">
          <div class="company-logo"></div>
          <div class="logo-text flex flex-d-col flex-ai-c">
            <p class="logo-text-main">punitham</p>
            <p class="logo-sub-text">disabiltiy service</p>
          </div>
        </a>

        <div class="menu-toggle flex flex-d-col flex-jc-sb">
          <span class="one bar"></span>
          <span class="two bar"></span>
          <span class="three bar"></span>
          <span class="four bar"></span>
        </div>
      </div>

      <div class="header-section-2">
        <a href="#" class="call-btn flex flex-jc-c flex-ai-c">
          <i class="fa-solid fa-phone"></i>
          <p class="ph-number">03 4561 2795</p>
        </a>
      </div>

      <nav class="navigation hidden">
        <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Careers</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <script src="./script.js"></script>
  </body>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72994730

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档