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):

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

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

During a small project I was working on, I decided to add a background image to another image using CSS. Here is the code snippet: .child2 img { width: 200px; height: 200px; border-radius: 50%; background-image: url('./assets/images/imageb ...

cssangular

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

The CSS styles can vary depending on the web browser being used

Require assistance with my CSS. I designed an HTML/CSS widget on Blogger using my own expertise, but now facing some issues. The trouble arises with the image on the front left in the code. While it displays correctly on Google Chrome, aligned with the te ...

htmlcssbrowser

AngularJS: encountering an undetected object due to interdependencies between services and modules

I have a module called 'maps-services' with a service named 'MapService' defined as follows: angular.module('maps-services', []) .service('MapService', [$log, function($log) { this.initMap = function() { } ...

angularjsdependency-injectionangularjs-module

What is the best way to utilize ng-click for dynamically refreshing ng-repeat content?

On my webpage, I have implemented an ng-repeat directive. The initial loading of the page displays the data as expected through this directive. However, I am looking for a way to dynamically refresh the content of the directive using an ng-click function. ...

angularjsangularjs-directiveangularjs-ng-repeat

AngularJS - smooth scrolling with $anchorScroll duration

While going through the AngularJS documentation, I have not been able to determine whether $anchorScroll has a duration or easing option for smoother scrolling to elements. The documentation only shows: $location.hash('bottom'); // call $ancho ...

javascriptangularjsscrollanchor-scroll

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

PHP 7.2 does not allow code to reference previously set sessions

Currently, I am utilizing sessions to transmit either a success or error message to the subsequent site by employing an included PHP file (message.php) to exhibit said message. Unfortunately, for unknown reasons, the message.php file is unable to referenc ...

phphtmlsessionphp-7

Stylized widget for showcasing a list of cities for meetups

After extensive searching, I have yet to find a solution to stylize the "City List" widget for Meetup. The specific widget I am focusing on is the first one listed here. () Despite exploring various options such as the widget foundry and conducting onlin ...

csspluginswidgetmeetup

Pass an array from a script file in JavaScript to index.js within the Express framework

I've encountered a challenge in sending an array (or JSON object) from script.js to index.js, my express server file. I've explored various solutions such as passing the variable through an HTML file and then to another JavaScript file, utilizing ...

javascripthtmlnode.jsarraysexpress

Header with Sticky Behavior and Smooth Slide Down Animation

I am trying to achieve a scroll effect on my page where the header will move up when scrolling up, but at position 150 it should smoothly slide down and stay fixed at the top. I have tried various methods but haven't been able to get it right. Can som ...

jquerycsssticky

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. <table class="table-mainprojects"> <tr> < ...

phphtmlcss

Creating a dynamic user interface with HTML and JavaScript to display user input on the screen

I'm currently working on creating an input box that allows users to type text, which will then appear on the screen when submitted. I feel like I'm close to getting it right, but there's a problem - the text flashes on the screen briefly bef ...

javascripthtml

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

An issue arose while trying to create the perfect seed with yeoman

While working on my first Yeoman webapp using the ultimate-seed-generator, I encountered some errors that are hindering progress: C:\Users\Fidel\Desktop\Nueva carpeta\new-proyect>npm install > <a href="/cdn-cgi/l/email ...

node.jsangularjsnpmyeomanyeoman-generator

Which specific file is being requested when a forward slash (/) is placed immediately after the website URL?

Is it just me being clueless, or is there something unusual about this URL format? I've come across URLs like http://www.example.com/?p=1 quite often and I'm curious to know what exactly is being accessed by it. I usually use URLs such as http:// ...

phphtmlurlwebaddress

Different ways to utilize ng-repeat with option tags

Hello, I am currently utilizing a dropdown feature that fetches options from a database. To do this, I have created an array as shown below: const myArray = new Array(); myArray = [{className:5,avg:40},{className:6,avg:50},{className:7,avg:40}}]; Within ...

angularjs

Automatically initiate a click event when the page is loaded

I'm having trouble getting a click event to trigger on my controller when the page loads. I really just want the checkboxes to be clicked automatically. <!DOCTYPE html> <html > <head> <link rel="stylesheet" type="text/css" ...

javascriptangularjs

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

cssvue.jsvuejs3shadow-domscoped

Get Angular events in the proper order

I am currently facing challenges with event handling in AngularJs. In my service, I send out events using the following line of code : $rootScope.$emit("FNH."+this.status, flowNodeHelper); When receiving the event in service "S1," I handle it as follows ...

javascriptangularjsangularjs-directivedom-eventsangularjs-service