英文:
How do I avoid overlap of my fixed vertical navbar (its width being dynamic) with the page's main content?
问题
You can achieve this by using the CSS calc() function without variables. Here's the modified code for your situation:
main {
width: calc(100% - 20%);
padding: 1rem;
}
This will make the main element's width adjust dynamically to occupy the remaining space after allocating 20% for the nav element. This should help you avoid overlap without the need for JavaScript.
英文:
I have a fixed vertical <nav> element that has a dynamic width. I want it not to overlap with the <main> element no matter what, even if the screen width is small
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
margin: 0;
scroll-behavior: smooth;
}
body {
display: flex;
}
nav {
position: fixed;
display: flex;flex-direction: column;
flex-wrap: wrap;
width: 20%;
min-width: max-content;
height: 100%;
padding: 1rem 0.5rem;
background-color: #5382a1;
font-family: Tahoma, sans-serif;
}
nav header {
font-weight: bold;
color: white;
}
nav ul {
padding: 0;
}
nav li {
display: block;
padding: 0.4rem;
border: 1px solid white;
margin: 0.2rem 0;
text-align: center;
border-radius: 3px;
background-color: white;
color: hsl(34, 94%, 54%);
}
nav li:hover {
color: white; background-color: hsl(34, 94%, 54%);
}
nav a {
text-decoration: none;
color: inherit;
}
nav a:hover {
color: white;
}
main {
width: 70%;
min-width: 200px;
margin: 1rem 1rem 2rem 25%;
}
p {
margin: 1rem 0;
}
</style>
</head>
<body>
<nav id="navbar">
<header>Navbar</header>
<ul>
<li><a class="nav-link" href="#section-one">Section One</a></li>
<li><a class="nav-link" href="#section-two">Section Two</a></li>
<li><a class="nav-link" href="#section-three">Section Three</a></li>
</ul>
</nav>
<main>
<section id="section-one" class="main-section">
<header>
<h2>Section One</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-two" class="main-section">
<header>
<h2>Section Two</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-three">
<header>
<h2>Section Three</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
</body>
</html>
<!-- end snippet -->
You don't see any overlap in the code snippet above, but that's because the width is big enough. If you shrink it roughly to the size of a smartphone, you can start to see the issue
You may notice that <body> has a display: flex property, but it doesn't help since the <nav> is fixed (so any flex behavior doesn't apply to it). However, it may give you a better idea of what I try to achieve here
I could hypothetically do something like this
main {
width: calc(100% - nav.width);
padding: 1rem;
}
but the problem is you can't reference variables in the calc() function
I also tried this
nav {
width: 20vw;
}
main {
width: 80vw;
}
What would you recommend to avoid overlap of a fixed dynamically-sized vertical navbar with the main content without the use of JS?
I came across this similar question, but none of the answers proved helpful
答案1
得分: 1
请添加一个父级div，并给它添加position: fixed和display: flex，然后从nav中移除position: fixed。
另外，别忘了给main添加height: 100%和overflow-y: scroll。
英文:
Add parent div with position: fixed and display: flex and remove postion:fixed from nav.
also, don't forget to add height: 100% and overflow-y: scroll to main
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
margin: 0;
scroll-behavior: smooth;
}
.page {
position: fixed;
display: flex;
height: 100%;
width: 100%;
}
nav {
/* position: fixed; */
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 20%;
min-width: max-content;
height: 100%;
padding: 1rem 0.5rem;
background-color: #5382a1;
font-family: Tahoma, sans-serif;
flex: 0 0 auto;
}
nav header {
font-weight: bold;
color: white;
}
nav ul {
padding: 0;
}
nav li {
display: block;
padding: 0.4rem;
border: 1px solid white;
margin: 0.2rem 0;
text-align: center;
border-radius: 3px;
background-color: white;
color: hsl(34, 94%, 54%);
}
nav li:hover {
color: white;
background-color: hsl(34, 94%, 54%);
}
nav a {
text-decoration: none;
color: inherit;
}
nav a:hover {
color: white;
}
main {
/* position: fixed; */
overflow-y: scroll;
height: 100%;
width: 70%;
min-width: 200px;
margin: 1rem 1rem 2rem 5%;
}
p {
margin: 1rem 0;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page">
<nav id="navbar">
<header>Navbar</header>
<ul>
<li><a class="nav-link" href="#section-one">Section One</a></li>
<li><a class="nav-link" href="#section-two">Section Two</a></li>
<li><a class="nav-link" href="#section-three">Section Three</a></li>
</ul>
</nav>
<main>
<section id="section-one" class="main-section">
<header>
<h2>Section One</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-two" class="main-section">
<header>
<h2>Section Two</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-three">
<header>
<h2>Section Three</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
</div>
</body>
</html>
<!-- end snippet -->
Here is the jsfiddle link.
答案2
得分: -1
这种方法可以工作，但对于我来说有点太硬编码了。请注意这些更改：
nav {
/* ... */
width: 20vw;
min-width: 110px; /* 这是硬编码的 */
/* ... */
}
main {
width: 80vw;
min-width: 200px;
padding: 0 1rem;
margin: 1rem 1rem 2rem max(20vw, 110px); /* 这也是硬编码的 */
}
英文:
This kind of works, but it's a bit too hard-coded for my liking. Notice these changes
nav {
/* ... */
width: 20vw;
min-width: 110px; /* this is hard-coded */
/* ... */
}
main {
width: 80vw;
min-width: 200px;
padding: 0 1rem;
margin: 1rem 1rem 2rem max(20vw, 110px);
}
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
margin: 0;
scroll-behavior: smooth;
}
body {
display: flex;
}
nav {
position: fixed;
display: flex;flex-direction: column;
flex-wrap: wrap;
width: 20vw;
min-width: 110px;
height: 100%;
padding: 1rem 0.5rem;
background-color: #5382a1;
font-family: Tahoma, sans-serif;
}
nav header {
font-weight: bold;
color: white;
}
nav ul {
padding: 0;
}
nav li {
display: block;
padding: 0.4rem;
border: 1px solid white;
margin: 0.2rem 0;
text-align: center;
border-radius: 3px;
background-color: white;
color: hsl(34, 94%, 54%);
}
nav li:hover {
color: white; background-color: hsl(34, 94%, 54%);
}
nav a {
text-decoration: none;
color: inherit;
}
nav a:hover {
color: white;
}
main {
width: 80vw;
min-width: 200px;
padding: 0 1rem;
margin: 1rem 1rem 2rem max(20vw, 110px);
}
p {
margin: 1rem 0;
}
</style>
</head>
<body>
<nav id="navbar">
<header>Navbar</header>
<ul>
<li><a class="nav-link" href="#section-one">Section One</a></li>
<li><a class="nav-link" href="#section-two">Section Two</a></li>
<li><a class="nav-link" href="#section-three">Section Three</a></li>
</ul>
</nav>
<main>
<section id="section-one" class="main-section">
<header>
<h2>Section One</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-two" class="main-section">
<header>
<h2>Section Two</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-three">
<header>
<h2>Section Three</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论