Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

In my Bootstrap-Vue application, I have set up the following hierarchy:

<b-navbar.../>

<b-container >
    <b-row align-v="center" style="min-height:100vh">
      <b-col style="align-items:center">
            <h1>404 Error</h1>
            <p>The page you have requested does not exist.</p>
      </b-col>
    </b-row>
</b-container>

The <b-navbar .../> element is designed to scale based on its content rather than having a fixed height.

I am looking for a solution that will automatically adjust the container's content to fill the remaining viewport space without the need to manually calculate the height of <b-navbar .../>. This way, the 404 text will always be positioned in the center of the available space. Currently, when I expand the Navbar, the 404 text ends up moving beyond the lower edge of the viewport.

htmlcsstwitter-bootstrapvue.jsvuejs2

Answer №1

Are you satisfied with this outcome?

html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
<div class="wrapper">
  <b-navbar>NAVBAR</b-navbar>

  <b-container class="container">
      <b-row align-v="center">
        <b-col>
          <h1>404 Error</h1>
          <p>The page you have requested does not exist.</p>
        </b-col>
      </b-row>
  </b-container>
</div>

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

Unable to avoid clicking on previous dates in v-calendar (Vuetify)

I recently set up a v-calendar following the guidance provided in the Vuetify documentation. However, I'm encountering an issue where I can't seem to disable the click event for past days. This prevents users from creating events on days that hav ...

vue.jsvuetify.jsvcalendar

Using jQuery to Convert CSV Data into an HTML Table

I've been exploring the incredible jquery.csvtotable.js plugin for converting csv files to html tables. One question that has been on my mind is how can I allow users to select a .csv file using a browse button that isn't a server-side control? ...

c#jqueryhtmlcsv

Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components: <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br&g ...

cssangularangular-material

Connect your Nuxt.js application with Mailchimp for seamless integration

I've tried the solution recommended in this thread, but unfortunately, it's not working for me. Every time I run npm run dev, I encounter an error message: ERROR - Compilation failed with 1 error at 11:21:24 The following dependency was not fo ...

javascriptwebpackvue.jsnuxt.js

Using Vue.js to increment a value in an array every time a new row is added

In Vue.js, I am attempting to increment an array value when adding a new row. However, I encounter the following error message: You may have an infinite update loop in a component render function. The JavaScript logic looks like this: new Vue({ el: ...

javascriptnode.jsecmascript-6vue.js

Is there a way to successfully submit multiple locations, each separated by commas, through the multipart form?

Here is my HTML form: <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handelSubmit($event);"> <div class="clear"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="form ...

javascripthtmlvue.jsvue-componentform-data

The header and footer elements must be included along with a main div to house the content on the webpage

I am currently working on building a website using HTML and CSS. I would like to create an index.php file that calls all the different parts of the page. For example, I want to include the header and footer, and also have the ability to replace content wit ...

phphtmlcss

Divs displayed using inline-block do not align seamlessly

I am having an issue with the alignment of 4 divs displayed inside a main container. Despite all having a fixed height of 100px, some of them have text that is one line longer than the others. In theory, this should not affect their positioning on the same ...

htmlpositioncss

What could be causing my HTML email to appear distorted when viewed in Gmail?

After spending the last 6 hours tackling this issue, I am still stuck. Despite my extensive googling, it seems that divs are supposed to work in emails post-2017. All the online HTML email testers I have used indicate that my email layout is perfectly fine ...

htmlcssemailgmail

Struggling to create a responsive navbar for a landing page using Next.js and TailwindCSS

I'm currently working on a landing page using nextjs, tailwind css, and shadcnui. The design looks great on desktop with a logo and two links, but it's not responsive on smartphones. https://i.stack.imgur.com/HVQsa.png On mobile devices, the lay ...

cssreactjsnext.jstailwind-css

Tips for uploading images using Rails-Api, Vue.js, Cloudinary, and Attachinary

In my experience working with server-rendered Rails applications, I have relied on Cloudinary and Attachinary for uploading images and files to an external server and linking them to my data models. As I transition to using Vue.js with Rails-API more freq ...

vue.jscloudinaryrails-api

HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

I've customized a smaller UIWebView specifically for the iPad, and I've created my own HTML5 controls for the video playback. However, when I try to maximize the video, all I see is a black screen instead of the actual content. The audio still pl ...

javascriptcssipadhtml

Is there a way to achieve the same zooming and panning effects on an element using CSS transform instead of jQuery's

If you click on the following link, you will see a jsFiddle that I have created to demonstrate my question: http://jsfiddle.net/VbCcA/3/ In my project, I have developed a function that allows for panning and zooming to a specific element. This function i ...

jquerycssjquery-animatecss-transforms

Having Troubles with PHP File Upload Form

Executing index.php initiates the user input of metadata and files: <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"/> <meta http-equiv="X-UA-Compati ...

phphtmlfile-uploaduploadfilesize

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

javascripthtmlcsscontainers

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

htmlcssangulartypescript

Exploring the capabilities of VueJs in detecting events triggered by parent components

When users click on a specific image in the Collection(parent component), my goal is to display that image in a Modal(child component). Below is the code snippet: routes.js import Home from './components/Home'; import About from './compone ...

javascriptlaravelvue.jsvue-router

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss

Utilizing jQuery to Perform Calculations with Objects

Can someone help me with a calculation issue? I need to calculate the number of adults based on a set price. The problem I'm facing is that when I change the selection in one of the dropdown menus, the calculation doesn't update and continues to ...

javascriptjqueryhtmllogic

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss