What is the significance of vh and percentage values in CSS?

Can anyone help me figure out why the .navbar is not displaying correctly on half of the screen? I think there might be another container causing the issue, but I'm unsure.

  1. I've set the body to 100vh to cover the entire screen

  2. The .navbar should take up half of that using a percentage

This is my HTML file:

    body {
      background-color: red !important;
      width: 100vh;
      height: 100vh;
    }
    .navbar{
      width: 50%;
      background-color: white;
    }
    .navbarButtons{
      background-color: aqua;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <div class="navbar">
            <div class="navbarButtons">
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
            </div>
        </div>

htmlcssdjangobootstrap-4

Answer №1

Note on sizing: It is important to distinguish between using vh and vw. Remember to include:

width: 100vw // vw represents view width
height: 100vh // vh represents view height

If you want the header height to be half of the screen, simply add:

height: 50vh

See an example below:

body {
      background-color: red !important;
      width: 100vw;
      height: 100vh;
    }
    .navbar{
      width: 100%; 
      height: 50vh;
      background-color: white;
    }
    .navbarButtons{
      background-color: aqua;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <div class="navbar">
            <div class="navbarButtons">
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-primary">Primary</button>
            </div>
        </div>

Answer №2

Instead of relying on vh, it may be more effective to utilize the % approach.

Consider implementing the following CSS:

html,
  body {
    box-sizing: border-box;
    height: 100%;
    background-color: blue;
  }
.navbar {
    height: 50%;
    width: 50%;
    background-color: yellow;
}
.navbarButtons {
    background-color: green;
}

Answer №3

In addition to Kareem's answer, it is important to make a few style updates. Utilizing vh for view height set at 50 will ensure compatibility across different browsers.

.all {
  background-color: red;
}

.navbar {
  background-color: white;
  height: 50vh;
}

.navbarButtons button {
  background-color: aqua;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="{% static " NavBarHtml.css " %}" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body class="all">
  <div class="navbar">
    <div class="navbarButtons">
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-primary">Primary</button>
    </div>
  </div>
</body>

</html>

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 .remove() method is ineffective when used within an Ajax success function

I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...

javascriptjquerycsshtml

Is it possible to execute queries within django pre_save signals?

This code snippet is from the models.py file: class ledger1(models.Model): User = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE,null=True,blank=True) Company = models.ForeignKey(company,on_delete=models.CASCADE,null=True,blan ...

pythondjangodjango-modelsdjango-signals

Divs are piling up on one another, but they're not in the correct sequence

Currently, I have two divs placed side by side and utilizing a media query to stack them. However, my goal is to have the yellow div on top with the blue div below it once the script is executed. Unfortunately, I am unsure of how to achieve this. #wra ...

htmlcssmedia-queries

Accessing an HTML file in the browser using an npm script

I have been searching for a solution that doesn't involve installing an npm package to host the file on an http server. All I need is to open a basic HTML file from my local computer in a browser using an npm script, without needing a server. Is there ...

htmlnode.jsnpmhosting

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

javascripthtmlajaxhttp-redirect

What causes the original Django object to be altered upon cloning?

Seeking assistance with cloning a Django model or object. Below is the code snippet containing some debugging statements (the method belongs to the Item class). def duplicate_item(self): print("original",self.id) copy = self copy.id = uuid.uui ...

pythondjango

Adjust the color of the glyphicon icon within a date and time picker dropdown component

I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code: <div id="custom-dates" style=" clear:both;"> <div class="container"> <div class="row"> <div class='col-md-3 col-xs-3' ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Having trouble sending data to a Django function with Ajax request

I am currently facing an issue with my AJAX calls in Django. While fetching data works seamlessly, adding new data is resulting in an error message. Method Not Allowed (POST): /mymodels/ Method Not Allowed: /mymodels/ [17/Mar/2020 22:27:24] "POST /mymodel ...

javascriptpythondjangoajax

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

When using Angularjs to automatically populate a list with *ngFor and then implementing a POST service, the list stops functioning properly and only displays the default option. <select id="descripSel" (change)="selectDescrip()" > <option >S ...

htmlangulartypescript

Transitioning into a fade out effect using CSS

I successfully created a modal using CSS and jQuery. The fade in transition works perfectly, but I'm having trouble implementing a transition for when it fades out and scales back to 1.4. The main issue is that the modal disappears too quickly. Chec ...

jquerycss

Ways to optimize view caching to prevent unnecessary file reads and rendering

My current code includes multiple view render calls: router.get('/mcn', (req, res) => { res.render('product/mcn', { layout: 'product/layout', contactKey: 'mcn' }); }); router.get('/agency', (req, res ...

htmlnode.jsexpresspugserver-rendering

Fonts in Internet Explorer are displayed correctly only until the webpage has finished loading

I've encountered a very peculiar issue on a website I'm currently working on: While the page is loading, the fonts I've utilized (Georgia and Bebas Neue) appear correctly. However, once the page finishes loading, they switch to default sans ...

cssfonts

Utilizing a 100% width Bootstrap form with SelectBoxIt inputs

Utilizing SelectBoxIt inputs () in Bootstrap 3 horizontal forms is causing an issue. I want the input to adjust and collapse along with the form width, but setting the widths to 100% is causing them to collapse instead. To demonstrate the problem, I' ...

jqueryhtmlcsstwitter-bootstrap

Problems encountered during server migration

After successfully deploying my Django project to a Digital Ocean server and installing all requirements, I encountered an issue when trying to run migrate following makemigrations. The exception I received was: django.db.utils.ProgrammingError: relation ...

djangopostgresql

Tips for improving the focus of the bootstrap datetime picker?

I have integrated the Bootstrap datetime picker (bootstrap-datetimepicker.min.js) into my code. Within the DIV tag, I have included the class="modal fade" to open the first popup. In the first popup, there is a datetime picker. When clicking on the picker ...

jquerycss

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

Using a OneToOneField in Django Admin

Revised with one-to-one field usage I am looking to include the area of a building in a Django modeladmin. Here is the table structure: class Area(models.Model): id = models.IntegerField('Buildings', db_column='id') area = mode ...

pythonpython-3.xdjangodjango-adminone-to-one

Sass compilation failed due to an error in the CSS code provided

Just starting out with sass, I recently downloaded bulma, installed gem, and sass. My attempt to compile a default sass file using sass style.scss style.css resulted in errors. Here is my directory structure: https://i.sstatic.net/0OZSR.png However, I en ...

csssass

What could be causing the .text method to not retrieve text even when it is present?

Currently experimenting with web scraping using Selenium to extract the color of a particular dress. Despite finding the text content under the 'screen-reader-text' class when inspecting the website, my attempts at fetching it result in an empty ...

javascriptpythonhtmlseleniumweb-scraping

Not including traffic from IE 6/7

Is there a simple way to show a different page to users on IE6/7 when they visit a website? For example, can I redirect users from example.com to example.com/ie7? Unfortunately, IE7 is not compatible with the website I created, so I want to display a min ...

htmlcssinternet-explorer