Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar.

I am currently working on an angular application using the Ionic framework for testing purposes. My goal is to create a footer that always stays at the bottom of the page, but for some reason, it isn't working as expected.

This is what I am experiencing (the orange bar should be the footer): https://i.sstatic.net/bwQM8.png

I have tried implementing a solution similar to Ryanfait's stickyfooter.

Here is my CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -150px; 
}
.page-wrap:after {
    content: "";
    display: block;
    height: 150px;
}

#mainView #footer {
    height: 150px;
    background: orange;
}

And here is my HTML:

<div class="page-wrap">
    <div id="logo-ionic">
        <img src="img/ionic.png" />
    </div>
</div>

<div id="footer">
    <!-- Footer content blablabla -->
</div>

I prefer not to use a javascript solution for this issue.

Thank you! (:

htmlcssangularjsionic-framework

Answer №1

If you have a need for Ionic, why not consider using the 

<ion-footer-bar></ion-footer-bar>
directive?

Check out this link for more information.

Answer №2

Various CSS strategies have been developed to address the following objectives:

The layout should feature a fluid center with fixed-width sidebars. The main content column (center) should be prioritized in the HTML structure. All columns must maintain equal height, regardless of varying content lengths. Minimal markup should be required for implementation. The footer should remain anchored at the bottom of the page, even when there is limited content.

For more information, visit

Alternate Solutions: Check out these resources

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
http://www.cssplay.co.uk/layouts/fixit.html
http://jsfiddle.net/jgmoy4a3/
http://codepen.io/VinSpee/pen/zxBJVO

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

Having trouble customizing the HTML range input?

I am looking to customize the appearance of a range input slider. Specifically, I want the slider to be green for the lower portion (where the thumb has moved) and grey for the remaining section. I have successfully changed the default styles from blue and ...

javascripthtmlcssangularrange

Is there a way to access a CSV file containing a comprehensive list of days and months?

I am in the process of designing a booking form for a website, and the client has specified that they prefer a drop-down menu for selecting dates rather than a traditional calendar. To achieve this, I plan to utilize gravity forms. For the date options, I ...

html

Displaying an email exist error message is important when updating an email address, and it is necessary to validate both the

      My code is triggering an email exists error when I remove NOT EXISTS from the SELECT query. However, it also incorrectly claims that my current email already exists when I try to update it. How can I modify the select query to handle the email e ...

phpjqueryhtmlajax

What is the best way to increase a numerical input?

While experimenting with HTML input elements, I decided to utilize the step attribute. This allowed me to increment the current value by 100 when clicking the up or down arrows in the input field. However, I discovered that the step attribute restricts th ...

javascripthtmlhtml-input

What is the best way to add padding between form elements in Bootstrap 4?

Is there a way to add space between form elements in Bootstrap 4? The code snippet below shows an example where the full name has spacing from '@' but the username does not have any. Any suggestions on how to fix this? <form class="form-inlin ...

htmlcssbootstrap-4

The Razor MVC does not support HTML syntax within an If condition

Here is the code snippet I currently have in one of my MVC views. It seems that within the specified if condition, the HTML code is not being recognized. <table class="table"> <tr class="row h4"> <td>Task</td> ...

c#htmlasp.net-mvc-4razor

Encountering difficulties when trying to set up popovers in Bootstrap

I'm currently working on enhancing an Angular application developed by someone else. My task involves adding a popover feature. The HTML code is located within an ng-include template and includes the following tag: <p class="filetracker-label" dat ...

jqueryangularjstwitter-bootstrap

What is the best way to maintain the current position in a component while interacting with another component?

I have a component that displays a collection of cards with images. There is a button that toggles between showing another component and returning to the original list of cards. The issue I am encountering is that every time I return to the list of cards, ...

javascriptcssreactjs

Having issues with Inline-Block functionality?

I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...

htmlcss

The passport object is not being called in the passport/express application, causing the deserializeUser function to not be executed

My current setup involves an AngularJS app on a separate domain making requests to an Express-based API. To provide some context, the app is hosted at localhost:9000 and connects to the API at localhost:3000. The versions being used are Express 3.51, Passp ...

angularjsnode.jsexpresspassport.js

behavior of the back button within an AngularJS program

Currently facing an issue with a single-page application built using AngularJS. The app is composed of three main views - the login view, main view, and logout view. myapp/#/login myapp/#/main myapp/#/logout This is my route provider setup: function Ro ...

javascriptangularjssingle-page-application

showing a pop-up message when a specific javascript function is triggered

Here is a unique code snippet showcasing a customized dialog box created with HTML, CSS, and JavaScript. The dialog box is displayed when a button is clicked. <!DOCTYPE html> <html> <head> <style> /* Custom Modal Styles */ .modal { ...

javascripthtmlformspopuponsubmit

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

javascriptphpcssajaxtinymce

Can someone help me understand how to show nested values within an ng-repeat loop

How can I modify the code to only display rows with nested values? $scope.mainObj = [{ name: 'a', items : [1,2,3], name: 'b', items : [4,5,6], }] <table> <tr ng-repeat="obj in mainObj"> <td></td&g ...

angularjs

Passing dynamically loaded parameters to a function during dropdown value selection in Angular 2

Could you please review if I am passing the parameters correctly in the li tag's click function of the updateId method? The console errors only point to that line. This is my app.component.html code: <div class='form-group' style="width ...

javascripthtmltwitter-bootstrapangular

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

pythoncssplotly-dashbootstrap-5

Having trouble getting the img src to work in Django 2.1 template?

I'm having trouble displaying images in my Django template file. Despite uploading the images to media static files, they do not appear on the template. When I click on the image link in the Django admin page, it shows a "Page not found(404)" error me ...

pythonhtmldjangomarkdown

Using Ajax to submit two forms by clicking a submit button

Explanation : In this particular scenario, I am facing a challenge where I need to trigger another Ajax function upon successful data retrieval, but unfortunately, I am encountering some unknown obstacles. Code: ---HTML Form : <form accept-charset=" ...

javascriptphpjqueryhtmlajax

Enhancing the user experience of the dropdown component through improved

I have developed an accessibility feature for a dropdown component that dynamically populates values in the options menu only when the dropdown is opened. This means that it compiles the template on the fly and attaches it to the dropdown box. Dropdown HT ...

javascriptangularjsaccessibilitywai-ariajaws-screen-reader

Issue: Failed to access the 'setDir' property of an undefined object

Greetings, I am a newcomer to Ionic/Angular and have been facing a particular issue for over 20 days now. I have created a small app and would like to implement multi-language support with both RTL and LTR directions. I followed the documentation provided ...

angularjstypescriptionic-frameworkngx-translate