Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions.

The problem lies in my flex container not properly filling the screen height, causing it to overflow at the bottom. Here is my code:

/* css */

body {
  margin: 0;
}

#main-doc {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

#container-nav {
  position: fixed;
  height: 100%;
  width: 13.35em;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#nav-header {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.nav-link {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  background: green;
}

#container-nav {
  padding: 1em;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 780px) {
  #container-nav {
    position: absolute;
    width: 100%;
    padding: 0;
    overflow-y: scroll;
    height: 20%;
    border-right: none;
  }
  #main-doc {
    display: flex;
    flex-flow: column wrap;
  }
  #nav-header {
    flex: 0;
  }
  .nav-link {
    flex: 0;
    padding: 1em;
  }
}
<!-- html -->
<main id="main-doc">

  <nav id="navbar">
    <div id="container-nav">
      <header class="nav-link" id="nav-header">Flexbox Documentation</header>

      <a src=# class="nav-link">About</a>
      <a src=# class="nav-link">Basics</a>
      <a src=# class="nav-link">Flex Container Properties</a>
      <a src=# class="nav-link">Flex Items Properties</a>
      <a src=# class="nav-link">Examples</a>

    </div>
  </nav>
</main>

htmlcssflexbox

Answer №1

Ever experimented with using vh units?

1vh is based on 1% of the screen's height, so consider setting your height to 100vw

For example: 

#container-nav { height: 100vh; }

Find out more here

Answer №2

When it comes to making a column full-height, the solution lies in the 'Holy Grail' layout concept, which has already been tackled by flexbox and grid for some time.

To achieve this, the top-most container needs to have a minimum height of 100vh set using min-height instead of height. This allows the element to extend as needed.

In addition, the HTML has been optimized by removing unnecessary elements, classes, and ids, moving the header outside of the nav, and organizing nav links within a ul with appropriate href attributes instead of src.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

a {
  color: inherit;
}

h1 {
  font-size: 1.25rem;
  margin: 1rem 0;
}

nav {
  background-color: red;
  padding: 2rem;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
nav li {
  margin: 0 1rem 1rem 0;
}
nav a {
  background-color: green;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
main p {
  height: 200rem;
}

@media screen and (max-width: 780px) {

  body {
    flex-direction: column;
  }
  nav ul {
    flex-direction: row;
  }

}
<body>

  <header></header>
  
  <nav>
    <h1>Flexbox Documentation</h1>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Basics</a></li>
      <li><a href="#">Flex Container Properties</a></li>
      <li><a href="#">Flex Items Properties</a></li>
      <li><a href="#">Examples</a></li>
    </ul>
  </nav>
  
  <main>
    <p>Main content</p>
  </main>
  
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The PHP code is experiencing issues on the enquiry/callback form, but it is functioning correctly on the contact form

I'm having trouble understanding why I am only getting the telephone number and missing the name and email fields when submitting a form. I have tried making changes, but I can't get all three fields to work properly. <aside clas ...

phphtml

By utilizing the body element as the container instead of a div, the content shifts to the left by eight pixels

When the body is used as the wrapper instead of a div, the content shifts eight pixels to the left (on a 1920×1080 display) when it extends below the fold. The examples below illustrate this difference in code snippets. Please note that the variance is on ...

htmlcss

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

Build a bootstrap table with rounded corners

Currently, I am utilizing Bootstrap 5 and have the table code below: .reasonCode-table { padding: 8px; border-collapse: separate; } .reasonCode-table th { border: 2px solid #7a7878; padding: 8px; border-radius: 2px; border-collapse: collaps ...

htmlcssbootstrap-5

I am just beginning my coding journey and could use some assistance with resolving this dilemma. I have included a photo for reference. I am struggling to add some space after the final card

click here for image description Can someone assist me in creating some space following the final card? ...

htmlcssresponsive-design

Modify the CSS selector for a dropdown menu element upon selection

I have customized a select box using CSS, but I am facing an issue where the custom arrow remains upward even after selecting an option. I want the arrow to point downwards once an option is chosen and revert to the default position when clicked outside. ...

htmlcss

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

htmlcssword-wrap

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

javascriptjqueryhtmlcss

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

jquerycsshtml

Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one. As I compile my scss, this piece of code: .foo { ... &__bar { ... } } transforms into the expected output below: .foo { ... } .foo__bar { ... } However, I actually need it t ...

csswebpacksass

How can you ensure that divs stay the same size and appear next to each other without resorting to using

I need assistance with organizing my website layout as shown below: The image div will display an image of variable size, which needs to be vertically and horizontally centered. The text div will contain a large amount of text. While this could easily be ...

htmlcss

Unable to bypass YouTube advertisement

I am currently experimenting with using nodejs puppeteer to test if I can bypass the ad on Youtube. Although this is just for testing purposes, I am facing some challenges with getting it to work as expected. I have implemented a while loop to search for ...

javascripthtmlnode.jspuppeteer

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...

javascriptphphtmljquerylaravel

Function that activates traffic lights

Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this f ...

javascripthtmlcss

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

phphtmlcss

Error: Attempting to append a child to a non-existent property

I am currently learning Java Script and this is the code I have been working on. <!doctype html> <html> <head> <style> div {position:absolute; width:500px; height:500px} img {position:absolute} ...

javascripthtmldom

Preload-webpack-plugin does not support pre-fetching files

I have a query about prefetching and preloading content. In my vue app, I noticed that after building, I have duplicate files loaded in my dist/index.html file. Here is an example: Additionally, the "scripts" are not being preloaded/prefetched as expec ...

javascripthtmlvue.jswebpackvue-cli

How to effectively eliminate the border of a single cell within a Bootstrap Table

Is there a way to remove the border of a single cell in a bootstrap table without affecting the others? I attempted using an id on that specific cell and adding the following CSS code: #borderless-cell { border: 0; } Unfortunately, this solution doesn&ap ...

htmlcssangulartwitter-bootstrapangular-ui-bootstrap

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

Cleaning up checkbox names by removing unnecessary characters

I'm having an issue with unnecessary characters in the names of checkboxes. There is a certain line var string = "<div class="blblb"><input type="checkbox" name="dasdasads"><input type="checbox" name="adsdsada"></div>"; The ...

javascripthtml