Footer that sticks in a vuejs application

I am facing a challenge in implementing a sticky footer in my vuejs application.

Vuejs and similar frameworks require the presence of a root element in the template.

This requirement is causing complications when trying to use Flex to create a sticky footer.

If I remove the root element:

<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p>
    <button id="add">Add Content</button>
  </p>
</div>

<footer class="footer">
  Footer
</footer>

everything works fine, but as soon as the root element is included, it causes issues.

<div>
  <div class="content">
    <h1>Sticky Footer with Flexbox</h1>
    <p>
      <button id="add">Add Content</button>
    </p>
  </div>

  <footer class="footer">
    Footer
  </footer>
</div>

As removing the root element is not feasible, could someone please provide guidance on how to adjust the CSS to work with the root element?

JsFiddle

htmlcssvue.jsflexbox

Answer №1

To ensure the layout of your webpage is set correctly, assign an id to the outermost div element (for example, id="container") and apply the CSS properties you have defined for the body:

<div id="container">
  ...
</div>

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

https://jsfiddle.net/Yu8rch6A/2/

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

Exploring alternatives to ref() when not responsive to reassignments in the Composition API

Check out this easy carousel: <template> <div ref="wrapperRef" class="js-carousel container"> <div class="row"> <slot></slot> </div> <div class=&q ...

javascriptvue.jsvuejs3vue-composition-api

What is the best way to include a background image in a div within a React component?

I'm currently following a tutorial on creating an RPG game using React. The tutorial can be found at this link. I am trying to replicate the presenter's code by typing it out myself. However, I'm running into an issue when attempting to add ...

javascriptcssreactjs

Utilizing Vuex Actions: Executing an Action within Another Action without Dispatching, Utilizing Promise.all for Chaining

When working within a vuex action, I find myself needing to wait for the results of multiple other actions (all promises). Avoiding nesting dispatches would be ideal, so I'm wondering if there is a way to achieve this by using Promise.all. For example ...

vue.jsvuex

Guide to creating scroll-based animations for a Div element

I've been brainstorming ways to rotate a div as I scroll. My goal is to recreate the effect shown in this codepen. However, I'm struggling to implement scrolling functionality. What I envision is scrolling down causing the word Data to rotate in ...

javascripthtmlcss

An issue with the animation script in Ionic

I'm having trouble converting this to an Ionic application. Here's my code sample. Can anyone help me with putting this code correctly in Ionic? I'm trying to achieve something like this example <script src="https://cdnjs.cloudflare.com ...

cssangularionic-framework

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

cssvue.jsnpmwebpackvue-cli

The Vue components in Laravel fail to update after pulling changes from the repository on the live server

Currently working with LARAVEL and Vue, I recently deployed a project on Digital Ocean using Ubuntu and Nginx. After launching, I have added more features to the project. However, when I pulled these changes onto the production server, they are not appeari ...

laravelvue.jsnginxdigital-ocean

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

javascripthtmlcssforms

What is the best method for designing a filtering menu with a "Narrow By" option?

Looking to create a sidebar menu similar to the functionality on mcmaster.com. This specific feature allows users to efficiently filter products and toggle through different options dynamically. Upon selecting the "metric" option, the entire page adjusts t ...

javascriptjqueryhtmlajaxcss

Altering the vertical position of <li> within the nav bar without impacting the size of the nav bar is proving to be a

How can I adjust the vertical position of li elements without impacting the height of the navigation bar? Below is the code snippet in question: body { margin: 0px; } ul { margin: 0px; padding: 0px; list-style: none; padding-left: 5px; pad ...

htmlcssnav

Tips for retrieving the file name from the <input type="file" tag within a JSP page

I am looking to retrieve the file path from an HTML input type="file, which is selected by the user in the file dialog. <script> function OpenFileDialog(form) { var a = document.getElementById("inputfile").click(); SampleF ...

javascripthtmljspservletsfile-upload

Leveraging dynamic slots and dynamic components

I am currently developing a MultiStepForm component and aiming to make it as dynamic as possible. In my Setup.vue component, I have defined a steps array structured like this: const steps = ref([ { label: 'Company', number: 1, ...

vue.jsvuejs3

Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning ...

jqueryhtmlcss

Changing the text in a Bootstrap tool-tip

Currently encountering an issue where I am attempting to modify the text displayed in a tooltip, but it appears that the change is not taking effect. Instead, upon hovering over, you will see the text "your new title." My goal is simply to alter the text w ...

jqueryhtmltwitter-bootstrap-3

The drop-down menu keeps flickering instead of remaining open when clicked

I am facing an issue with a dropdown menu in my webpage. The menu is initially hidden, but should become visible when the list element containing it is clicked. I have written JavaScript code to add a class that changes the visibility property to visible u ...

javascripthtmljquerycss

The current situation is not effective; it is causing an error saying "Uncaught TypeError: Cannot read property 'substring' of undefined"

Encountering an error "Uncaught TypeError: Cannot read property 'substring' of undefined" while debugging in Chrome Inspector, with the following code: <script type="text/javascript"> $(function countComments() { var mcount = '/ ...

javascriptjqueryhtmljsonsquarespace

Using Linux to send beautifully formatted HTML emails

I am currently working on a Python 2.2 script that generates an HTML string by adding various elements to it. Here is a snippet of the code: html_string = "" html_string = html_string + "MIME-Version: 1.0\n" html_string = html_string + "Content-type: ...

pythonhtmllinux

Hide Bootstrap columns for Printing

I am currently working on a webpage layout that consists of two columns. <div class="container"> <div class="row"> <div class="col-md-8 "></div> <div class="d-print-none col-md-4"></div> </div ...

cssflaskbootstrap-4

Encountering a problem when transitioning Bootstrap 3 code to version 5

After finding this template on github, I noticed it was a bit outdated with the use of Bootstrap 3. I decided to update it to Bootstrap 5 and replaced the Bootstrap 3 CDN accordingly. However, upon doing so, I encountered some issues. Can anyone help me ...

htmlcssbootstrap-4frontendbootstrap-5