Looking for assistance with fundamental HTML concepts

I'm struggling to make the navigation bar stretch to full height.

As a beginner in HTML and CSS, I have limited knowledge about it. I have tried numerous solutions found on the internet but nothing seems to work. The styling and HTML code are provided below. I have set all parent containers to full height but the issue persists. I obtained the style from the internet and I understand most of its functions.

body,
html {
  height: 100vh;
}

div {
  overflow: hidden;
  height: 100%;
  position: relative;
  background-color: aqua;
}

nav {
  display: block;
  text-align: center;
  height: 100vh !important;
  float: left;
  position: absolute;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: unset !important;
}

.nav a {
  display: block;
  background: #111;
  color: #fff;
  text-decoration: none;
  padding: 0.8em 1.8em;
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 #000;
  position: relative;
}
/* Remaining CSS code omitted for brevity */

<div>
  <nav>
    <ul class="nav">
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Portfolio</a>
        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Resume</a>
        <ul>
          <li><a href="#">item a lonng submenu</a></li>
          <li>
            <a href="#">item</a>
            <ul>
              <li><a href="#">Ray</a></li>
              <li><a href="#">Veronica</a></li>
              <li><a href="#">Bushy</a></li>
              <li><a href="#">Havoc</a></li>
            </ul>
          </li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Download</a></li>
      <li>
        <a href="#">Rants</a>
        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>

    </ul>
  </nav>
</div>

Answer №1

What is the benefit of setting the maximum height of the navigational element to 100vh? If you want it to span the entire width, you should specify width: 100vw; vw stands for "Relative to 1% of the viewport width" and vh represents the height.

Here is an example of a simple navigation bar:

<body>
<nav></nav>
</body>

<script>
    body { padding: 0; margin: 0}
    nav { width: 100vw;height: 50px;background-color: blue;position: fixed;top: 0}
</script>

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

Display hidden text upon clicking using React Material UI Typography

I have a situation where I need to display text in Typography rows, but if the text is too long to fit into 2 rows, ellipsis are displayed at the end. However, I would like to show the full text when the user clicks on the element. I am attempting to chang ...

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

Looking for assistance with parsing out four numerical values from an HTML scrape using Python

I currently have code that opens a URL and retrieves HTML data into htmlA Within htmlA, I am attempting to extract 4 specific pieces of information: A date Price 1 Price 2 A percentage The section of htmlA where these 4 pieces of information are located ...

The Bootstraps CSS style doesn't seem to be working properly or being overridden within an Angular

I have seen similar questions asked before, but none of the solutions provided have fixed my issue. It appears that the styles are being applied initially but then overridden by something else, and I am unable to identify what is causing this. The only r ...

What is the best method for applying a style specifically to controls located on the lower part of the

I am currently working on designing a table in a webpage and need to set styles for the <td> tags. Is it possible to apply different styles to the upper and lower cells? Can I use a <style> that specifically targets the bottom <td> tags? ...

Trouble with HTML Contact Page Email Delivery

Hello there, I recently set up a contact page for my html website but unfortunately, it's not sending the messages to my email as expected! You can see what I mean in this screenshot -> https://i.stack.imgur.com/2xPXw.png I'm a bit puzzled b ...

Storing Documents on Your Device

I've been working on a project to create a web page that provides links to online PDF files. When you click on these links, the file should be saved locally and its name/path added to local storage. I then aim to display all the saved files by iterati ...

Position three paragraphs in the center of a div container

Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...

Press the list button to reveal an enlarged box

Each item on this list contains a hidden box that should be shown after it is clicked. However, the issue arises when expanding one item causes other items to expand as well. Refer to the image for clarification: Image Link Is there a way to only expand ...

Trigger the onChange event for a number input using JQuery

Regarding the input that has type number: <input type="number" id="input-number" onChange="DoSomething();"/> Is there a way to trigger the onChange event using jQuery? [UPDATE] I was able to achieve this with the following code: $("#input_0").tr ...

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Currently, I am utilizing the flex property to create uniform columns and vh to ensure they have the same height. This setup is functioning properly, but within each column, there could be a varying number of items. I am interested in having the elements w ...

What are some methods for converting data from data tables into alternative formats?

I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...

Scraping Information on Pokemon from the Web

I am currently researching the number of moves each Pokemon from the first generation could learn. After some exploration, I came across a helpful website that provides this information: The website lists 151 Pokemon, and for each of them, their move set ...

Proper Method for Constructing Forms

While developing a signup form, I've noticed that I often turn to using tables for proper alignment, similar to the approach used on the MySpace signup page where colspan is utilized to evenly space out elements. Is this method going against conventio ...

Proper alignment of content in HTML using Bootstrap following the integration of .json data

After aligning the emergency hotlines properly, I am struggling to position the text under the image to display the data in three rows. I attempted col-4 but encountered issues with JSON. My objective is to show the image followed by the numbers directly b ...

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

Guide to adding a tag in front of a text in HTML with Python

Searching for all the text within the html document and wishing to incorporate a span tag that contains additional information about each text as shown below def recursiveChildren(x): if "childGenerator" in dir(x): for child in x.childGenerator( ...

Tips on resetting the position of a div after filtering out N other divs

Check out this code snippet. HTML Code: X.html <input type="text" id="search-criteria"/> <input type="button" id="search" value="search"/> <div class="col-sm-3"> <div class="misc"> <div class="box box-info"> ...