Creating a static footer in AngularJS with material design: A step-by-step guide

This is how I've set up my webpage design.

<div  layout="column" layout-fill ng-controller="MainCtrl as mc">
      <header>

        <md-toolbar md-scroll-shrink>
           <div layout="row" layout-align="center center" flex>
            HEADER INFORMATION
          </div>
        </md-toolbar>

      </header>

      <main>
        <div ui-view>
        </div>
      </main>

      <footer>
        <md-toolbar class="md-scroll-shrink">
          <div layout="row" layout-align="center center" flex>
            FOOTER INFORMATION
          </div>
        </md-toolbar>
      </footer>

</div>

Currently, the footer is positioned right after the main content. Depending on the size of the main content, the footer either appears in the middle of the screen or below the page height.

I aim to have the footer fixed at the bottom of the screen at all times. Additionally, I want there to be a scroll within the main content section based on its size.

If anyone has any suggestions or solutions, I would greatly appreciate it!

htmlcssangularjsmaterial-designangular-material

Answer №1

All you have to do is include <section flex> and apply the CSS rule overflow-y: auto;. Check out this live example: http://example.com

Answer №2

Place a mat-toolbar at the bottom of your webpage and apply this CSS spacer to ensure the text is centered:

<mat-toolbar color='primary'>
  <span class='spacer'></span>
    <h3>© Copyright Angular Apps 2017.</h3>
  <span class='spacer'></span>
</mat-toolbar>

Here is the CSS code for the spacer:

.spacer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

By following these steps, you can achieve a layout like this:

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

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

javascriptphphtmlcsscodeigniter

Trigger animation once you've scrolled past a designated point in the document

I created a count-up counter animation using JavaScript, but the issue is that the counter starts animating as soon as I refresh the page regardless of where I am on the page or if the counter is even visible. I would like the counter to only start workin ...

javascripthtml

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

Position a div at the center of the page while aligning it inline with another div

Is there a way to center an element on the screen while having another element positioned to its left? I have tried using float left and adjusting the padding of the center element to match the width of the left element. However, this method may not work ...

css

Implement a hover effect on a specific class targeting a nested element using JavaScript

Is there a method to apply a class that modifies rules for a child element using Javascript? I have successfully added it with CSS but am struggling to do the same with Javascript. Removing the class in JS is easy by referencing the classname before the ho ...

javascriptcss

Favicon not appearing on Jekyll website

This is my first time working with Jekyll. I'm currently working on localhost and trying to set a favicon for the website. I generated the image.ico and added the code provided to my head.html file. The image appears in my _site folder, but it's ...

javascriptjqueryhtmljekyllfavicon

Is it possible to scroll the grid horizontally?

I have a grid that scrolls vertically, with columns adjusting their width automatically. .grid { display: grid; overflow-y: auto; grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr)); } Now, I'm attempting to create a horizon ...

cssflexboxcss-grid

What is the best way to format a time in a 12-hour clock using JavaScript?

Is it possible to create a timer that performs an action after 12 hours? I want the timer to start at 6am and end at 6pm, lasting for exactly 12 hours. Additionally, I'm interested in converting my current 12-hour clock into a 24-hour format. I am se ...

javascripthtmlcss

Iterate through an array and update the innerHTML content for each value contained in the array

Looking to replace a specific word that keeps appearing on my website, I experimented with various functions and stumbled upon this method that seems to work: document.getElementsByClassName("label")[0].innerHTML = document.getElementsByClassName ...

javascripthtml

Words existing outside of an element

Currently, I am developing a slider using Bootstrap, and I have encountered an issue where the text displays on the left instead of aligning to the center in relation to the elements. To see this issue in action, you can check out the live demo here: In ...

htmlcsstwitter-bootstrap

Scrolling automatically within a child element that has a maximum height limit

I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...

javascripthtmlcssvelocity.js

Can the limit value of an SQL query be replaced with input from an HTML form?

Here is my question: SELECT * FROM learning_assessment.tbl_qna order by rand() limit 10; The table tbl_qna contains questions. My goal is to replace the static limit value of "10" with a number entered by an administrator in an input field. <html> ...

phpmysqlsqlhtmlrandom

The height attribute in HTML tables fails to restrict height in Firefox

Is there a way to restrict the height of a table while still being able to scroll through the hidden elements? I've tried a few methods but none seem to work as intended: http://www.example.com/code/example table.ex1 { table-layout: auto; h ...

htmlcss

JavaScript form not working on submission

When my form is submitted, a function is called that successfully redirects users on desktop to either the download-confirmation or download-failure page. However, when testing on mobile devices such as iOS and iPad, the redirection does not seem to work. ...

javascripthtmljqueryajaxforms

Having trouble interacting with element - Selenium WebDriver is not allowing the click

I'm attempting to select the Checkout Button. This is what it looks like : https://i.stack.imgur.com/TiMEO.png And here's the HTML snippet for it : <div id="buy-button-next"> <span data-reactroot=""> <div data-cid="buy- ...

javacssseleniumselenium-webdriverxpath

Dynamic div with height controlled by the content of the background image

I'm trying to figure out how to make a div with a background image of 100% width always maintain the aspect ratio of the image for its height. Is there a way to achieve this? In simpler terms, when I resize the page, I want the div to scale down whil ...

htmlcss

Integrate a fully developed ReactJS 16.x application seamlessly into an existing AngularJS 1.x framework

On a current project I'm working on, there's a unique challenge where I need to incorporate a compiled ReactJS app into an existing AngularJS project, with the Chrome/Firefox browser serving as the end-user interface. This setup isn't ideal, ...

angularjsreactjs

Choosing identical elements within comparable sub-divisions

How can I use JQuery to select an array of elements that are in separate sub divs? For example: <div class="panelWrap"> <div id="dvStage1" class="milestoneWrap" runat="server"> <div class="grid_1 ...

jqueryhtmlasp.net

Is it possible to incorporate a Material-UI theme palette color into a personalized React component?

My custom Sidebar component needs to have its background color set using Material-UI's primary palette color. Sidebar.js import styles from '../styles/Home.module.css'; export default function Sidebar() { return ( <div className={ ...

cssreactjsmaterial-uinext.jsjsx

Clicking on an element deactivates its hover state

While experimenting on this JSFiddle, I noticed that after clicking one of the boxes, the hover state becomes inactive and doesn't show up again. These three boxes have their background set using css background-image. The click event is attached usin ...

jquerycssclickhover