[英]How to set navigation menu to fill remaining vertical space after navigation bar with no fixed height?
I would like to make the make the menu fill the remaining vertical space without scrolling.我想让菜单填充剩余的垂直空间而不滚动。 I've experimented with position: absolute and heights but nothing seems to work.
我已经尝试过 position: absolute 和 heights 但似乎没有任何效果。 Anyone have any suggestions?
有人有什么建议吗? Maybe I need to structure my HTML differently?
也许我需要以不同的方式构建我的 HTML? Any help appreciated (: Sorry for the poor formatting of the question, still quiet new to stackoverflow.
任何帮助表示赞赏(:对于问题的格式不佳感到抱歉,对于stackoverflow来说仍然很安静。
Here is a video showing the functionality of the navigation menu:这是一个显示导航菜单功能的视频:
https://gyazo.com/809fcd5c6c665f37a9f467164404a297 https://gyazo.com/809fcd5c6c665f37a9f467164404a297
Here is a image:这是一张图片:
Below is my HTML,CSS and JS CODE:下面是我的 HTML、CSS 和 JS 代码:
<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>
.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;
}
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");
});
Just add height: 100vh
in .nav-list
只需在
.nav-list
中添加height: 100vh
.nav-list {
list-style: none;
background-color: lightblue;
text-align: center;
height: 100vh;
}
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"); });
.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; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.