The Vue-generated #app div on my website is not expanding to fill the entire page as it should

I've been having trouble setting #app to 100% height. It seems like div #app isn't being recognized as a child of Body. This issue keeps occurring and I always have to find a different workaround.

Is there a way to prevent this from happening entirely? CSS:

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito";
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  height: 100%;
}
body {
  transition: background 0.25s ease-in-out;
  min-height: 100%;
}
#app {
  max-height: 100%;
  min-width: 100%;
  position: relative;
}

https://i.sstatic.net/7g35A.png

cssvue.jsstylesheight

Answer №1

To solve this problem, consider using viewport height units which are based on the overall viewport height.

#main-container {
  height: 100vh;
}

Answer №2

If you happen to come across this in the future, make sure to check for any unwanted code in app.css or index.css. Deleting unnecessary lines of code can help resolve any sizing or property issues.

Answer №3

This issue doesn't seem related to Vue, but rather a common problem with CSS height percentages. To ensure that your divs properly take up 100% of the height, you may need to include the following code:

html, body {
  margin:0;
  padding:0;
  height:100%;
}

On another note, it might be worth exploring the use of flexbox to address this issue more effectively.

Answer №4

My assignment was to ensure that the maximum body width is 1980px, with the option to remove any width restrictions.

html {
    max-width: 1980px;
    margin: 0 auto;
    height: 100%;
}
body {
    font-family: Arial sans-serif;
    color: $textcolor;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1980px;
    min-height: 100%;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}
#app {
    height: inherit;
    width: inherit;
}

Answer №5

After rearranging some elements, I discovered that wrapping my <RouterView /> within a <main> tag was causing issues with the height display.

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

iOS users experiencing issues with displaced iframes when dragging

I am currently facing an issue with the iframe on my website. Whenever the Make an Appointment button is clicked, the iframe displays a contact form with multiple input fields. Although everything seems to be functioning properly, I have noticed that on i ...

javascriptjqueryioscssiframe

Guide on Ensuring a Fixed Div Covers the Entire Width of the Screen

Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference. ...

htmlcss

The marquee's position is reset the first time text is loaded dynamically from an API

In my angular project, I'm implementing a marquee feature to display data fetched from an API. However, I've noticed a strange issue where after a page reload, the marquee starts from right to left but once it reaches the end of the div, it reset ...

htmlcssangulartypescriptmarquee

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...

htmlcss

Display data-content vertically using CSS

Looking for a way to display text vertically one by one with CSS? While the rotation method produces this result: https://i.stack.imgur.com/utAiN.png However, I aim to achieve something more like this: https://i.stack.imgur.com/fuVyb.png If you have an ...

htmlcssrotationvertical-text

"Enhance your online communication with Webrtc video and audio chat using Laravel and Vue.J

Currently, I am working on setting up a video and voice chat using webrtc. The main issue I am encountering is that the audio of both participants is looping back to them. While we can hear each other clearly, we shouldn't be able to hear our own voic ...

laravelvue.jswebrtcaudio-streamingvideochat

Grid within a grid, spanning the entire width of the screen

After taking a glance at the screenshot provided below, I am striving to achieve the design labeled as "Lg" utilizing the Grid component from Material UI. The box labeled with the number "3" has been fashioned by employing a grid configuration of 9 by 3 O ...

cssreactjsgridmaterial-ui

Extracting text from a grid view in jQuery to style with CSS

My asp.net datagrid's HTML is displayed below in the browser: <div id="divViewAlldealers" class=""> <table id="ctl00_cph1_ucMS_grdAllDealers" cellspacing="0" border="1" style="border-collapse:collapse;" rules="all"> <tbody> ...

jqueryasp.netcss

Influencing various classes when :active is triggered

I encountered a challenge while working on an HTML project. I included a checkbox that should highlight all text input fields when checked. However, I'm facing an issue where some of the input fields within tables are not being affected by my code. An ...

htmlcsstextcss-selectors

Several components appear on the page, but only one of them is currently updating

I am encountering an issue with a Vue.js single-file component that I have implemented twice on the same page. While the component is supposed to display a list populated from an AJAX call, only the second instance seems to update correctly once the AJAX ...

vue.js

Adjust image size based on window dimensions changes

Let me demonstrate the issue I'm facing with this demo. This demo shows a simple list of images that scrolls across the page. When you click on an image, a larger version appears above it in a lightbox style. I want the height of this larger image ...

css

How to overlay text on top of an image in HTML without using the image as a background

Here is the code snippet I am currently working with: <img src="../../1021.png" alt class="img img-fluid"> </div> I am looking to add text and an input field over this image without setting it as a background due to certain reasons. Is ...

htmlcssbootstrap-4

CSS Trick: How to Clear Content in a 3-Column Div arrangement

I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing. When viewed in Firefox, the next ele ...

csshtml

What is the best way to incorporate an image sprite within table data?

Utilizing the Instant Sprite tool, I successfully created my own unique sprite image. With the help of a repeater control, I assigned the <td> class to be arg16 Private Sub cdcatalog_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handl ...

htmlasp.netcssspritecss-sprites

Particles.js is functioning properly in a .html file, however, it is not working in an .ejs file

I am currently working on a web development project to enhance my skills in HTML, CSS, and Javascript. I am utilizing NPM and Express for my server.js file. My goal is to incorporate Particles.js as the background on all of my pages, however, it seems to b ...

javascripthtmlcssnode.jsexpress

"Enhance your website's user experience with the ability to zoom in and out

One issue I encountered on my website was that when I included an iframe, the map would zoom in and out while scrolling. To try to fix this, I set pointer-events to none. However, this caused all actions on the map to be disabled, making it impossible to n ...

htmlcssiframe

Encountering a problem with loading the stylesheet

I keep encountering a 404 error when trying to load the CSS in my web application. The HTML content looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSL Inter App</title> <meta nam ...

htmlcss

Unusual Happenings with jQuery Draggable

Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue. When I drag the letter H towards the right and it gets near the letters E, L, L, or O, ...

jqueryhtmlcssdraggable

What is the best way to ensure a div spans the entire width of the screen?

I came across a helpful post on extending my container to the edge of the screen. Despite following the instructions, I still noticed a white space (highlighted in red): https://i.sstatic.net/w0bGf.png To address this issue, I experimented with setting t ...

htmlcss

The column headers in the Kendo grid fail to resize proportionally

The column headers in the Kendo grid do not scale correctly when the browser has a large or small resolution. This issue can be easily reproduced by zooming in or out on the browser. Refer to the image below for an example. Is this a known bug, and are th ...

csskendo-uitelerikkendo-grid