How to keep footer at the bottom of the page in Angular Material

I need assistance with keeping my footer at the bottom of the browser window when there is not enough content in the main section. I do not want a sticky footer and am looking for an angular material solution for this. Unfortunately, I have been unable to locate one.

Any help is appreciated!

<body layout="column" >
  <md-toolbar >
  </md-toolbar>

  <div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2 " flex >
    </md-sidenav>

    <md-content flex layout="row" layout-align="center start">
      <div style="max-width: 1600px;" flex layout="column" layout-fill >
        <div >
          This is the primary content
        </div>
        <div >
          This is the footer
        </div>
      </div>
    </md-content>
  </div>
</body>

You can view the code here on jsfiddle

htmlcssangularjs

Answer №1

If you are looking for a solution, check out this link. I have made some modifications to your HTML and implemented these style rules.

.wrapper,
div[layout=row]
{
    height: 100%;
}

div[layout=column]
{
      display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content
{
     flex: 1;
}

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

Checking the Validity of URLs in AngularJS

When validating a value provided by users for a URL field, the system consults platforms like Facebook, Twitter, and Google+. Does anyone have suggestions for the best way to validate this input? We are currently using the following pattern: /((?:https? ...

angularjshtml

How to efficiently retrieve a form's data from multiple forms with identical ids in JavaScript

I am facing a challenge with multiple forms on the html page that have the same ID. I need to send each form's information to the server based on user selection, but I haven't been able to find a relevant solution. For my Authorization polic ...

javascriptjqueryhtmlajax

Having difficulty syncing data from an AngularJS1.2 service to a PHP MySQL database

I am currently learning AngularJS and also exploring PHP and MySQL. My goal is to update my PHP database. Initially, I have inserted data for name, email, phone number, and password in the first form. Subsequently, upon logging in, I intend to update a s ...

phpmysqlangularjs

AngularJS drag-and-drop functionality

I have a requirement for implementing drag and drop functionality in a specific structure. https://i.sstatic.net/LJmIP.jpg To achieve this, I am utilizing this library. However, there are certain conditions that need to be followed. The main parent elem ...

angularjsdrag-and-drop

`Stop the JW Player from playing several videos simultaneously`

I have a situation where I want to display multiple videos on the same page, but only one should be playable at a time. When a new video is started, the currently playing video should automatically stop. <div class="tab-pane active" id="abc"><d ...

javascripthtmlvideojwplayer

How to retrieve the values of a property from a JavaScript object

Looking for a fresh perspective on this issue. I'm currently retrieving historical data from the cryptocompare API, but I'm having trouble accessing the received values. https://i.sstatic.net/oH6hz.png When I hardcode it as res.data.OMG.USD, I ...

javascriptangularjsjson

Absence of MVC5 Vanilla Layouts

Creating my first MVC5/Razor application from the ground up, I want to avoid including unnecessary references that cause bloat. In the Views folder, I have separate Home and Shared subfolders. The Home folder contains Index.cshtml, while the Shared folder ...

cssasp.net-mvcrazor

The Ionic application functions flawlessly on the browser, but unfortunately, it is not performing well on my Android device

My ionic application works well in Chrome, but after generating the .apk file, it encounters issues. In Chrome's developer mode, there is a warning: SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. P ...

javascriptangularjscordovaionic-framework

What is the best way to refresh the login page after successfully logging out using AngularJS?

Once a user signs out in my project, they are redirected to the 'login' state. However, if they try to log in again without refreshing the page, the login does not happen. It only works once the page is refreshed. Can someone please assist me wit ...

angularjs

Exploring AngularJS routing integration with Rails

I have recently started incorporating AngularJS into my Rails application. However, I am facing an issue where my route providers with Angular are not functioning as expected. Instead of displaying my template, the Rails view is being displayed. routes.rb ...

javascriptruby-on-railsangularjs

Error Message: ESP32 Guru Meditation Error - Core 1 in a State of Panic due to Load Prohibition

I recently attempted to set up a web server to control multiple LEDs using an ESP32. Initially, I had success with just one LED and button on the HTML page. The code worked fine, but I decided to expand it to include more buttons and variables. However, af ...

htmlc++error-handlingarduinoesp32

Show the value of a variable in $scope by utilizing another variable in $scope

How to Display Scope Variables in AngularJS Below are some of the scope variables I am working with: $scope.published = true; $scope.count = 3; Additionally, I have an array named 'labels' $scope.labels = ['published', 'count&apo ...

angularjsangularjs-scopeangularjs-ng-repeat

Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide: <--- DIV WIDTH ---> Text in div 1 Text in div two, it overflows Text in div three <--- DIV WIDTH ---> Currently, I've set the following C ...

javascriptjqueryhtmlcssmarquee

How can JavaScript be used to run a script only when the screen width is less than 480, and not when it is greater than 480?

Hi there, I have a simple script that I need help with. Despite not being well-versed in JavaScript, I am using Bourbon and Neat for the frontend of my website. On one particular page, I want to implement a collapse script from Bourbon refills. My question ...

javascriptjqueryhtmlcss

Can the index of an array be retrieved using ng-options in AngularJS?

Currently, I am utilizing ng-options to retrieve the index of an element within an array rather than its value: The select directive: <select ng-model="obj.value" ng-options="v for v in obj.values"></select> This setup works perfectly if th ...

angularjs

What sets apart ruby's HTTParty from angular's $http?

Using HTTParty to Post Request $http did not pass the http method properly. However, HTTParty functioned correctly and retrieved the desired results.</p> ...

ruby-on-railsrubyjsonangularjshttparty

Ways to create a div that scrolls and overflows within another div using flex:1

Is it possible to make source code contained within <pre> tags scroll horizontally when the browser window is resized? The pre tags are placed inside a flex box, with the containing div set to flex: 1. If so, how can this be achieved? <div sty ...

htmlcssflexbox

Excessive Blank Space Issue on Mobile Devices with MDBootstrap

I have been working on creating a replica of Watch2Gether, and it looks great on medium and large screens. However, when viewed on a phone, everything seems perfect until you scroll to the left and notice a large white space on the right side. I've ex ...

htmlcsstwitter-bootstrapresponsive-designmdbootstrap

How can you determine the CSS style value based on a different value?

Can I calculate a value based on another value? Here's an example: .my-div { width: 50px; height: calc(width * 2) } Is this doable? ...

css

Obtain the in-flow position of a DOM element

alert("Incorrect (red): " + document.getElementById("target").getBoundingClientRect().top); alert("Proper (blue): " + document.getElementById("wrapper").getBoundingClientRect().top); #target { transform: translate(20px, -20px) rotateZ(20deg); backgroun ...

javascriptjquerycsspositiontransform