Is there a way to create a footer that will only appear once the entire content has been read?

While utilizing Ionic, my code includes the following structure:

<ion-header></ion-header>
<ion-content>
    <div *ngFor="let publisher of publishers" class="contentspacing">
        <div class="border-div">
            <div class="chkbox">
                <input type="checkbox" class="chkBoxSize" id="instituteId{{publisher.ID}}" [checked]="publisher.preferenceValue || publisher.isSelected " (click)="capturepublishers($event,publisher.ID, publisher.Name, publisher)" />
            </div>
            <div class="listName taxonomyTitle">{{publisher.Name}}</div>
        </div>
    </div>
    <footer class="footerContainer">
        <strong>Copyright &copy, Synger All Rights Reserved</strong>
    </footer>
</ion-content>

/* The Footer Css */
.footerContainer {
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  overflow: hidden;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #d2d6de;
}


/* The ContentHolder that contain dynamic data */
.contentspacing {
  margin-bottom: 100% !important;
}

The content on my website is dynamically displayed across all pages. How can I modify the CSS to ensure that the footer only appears after all the content has been displayed?

css

Answer №1

Ensure to include position:fixed;bottom:0; in your footer class. I have also made adjustments to the content spacing margin. Hopefully, this solution proves helpful for you.

body {
  position:relative;
}
/* Customize Footer Styles */
footer.footerContainer {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #d2d6de;
    padding: 15px;
    text-align: center;
}


/* Define ContentHolder Styles for dynamic data */
.contentspacing {
  margin-bottom: 40px;
}
<div *ngFor="let publisher of publishers" class="contentspacing">
    <div class="border-div">
        <div class="chkbox">
            <input type="checkbox" class="chkBoxSize" id="instituteId{{publisher.ID}}" [checked]="publisher.preferenceValue || publisher.isSelected " (click)="capturepublishers($event,publisher.ID, publisher.Name, publisher)" />
        </div>
        <div class="listName taxonomyTitle">{{publisher.Name}}</div>
    </div>
</div>
<footer class="footerContainer">
    <strong>Copyright &copy, Synger All Rights Reserved</strong>
</footer>

Give the updated version a try. This one adheres to default HTML formatting standards.

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

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

Incorporating smooth sliding animation to ng-repeat elements

Our team has developed a custom widget in ServiceNow that displays a row of icons and reveals or hides additional details in a div when icons are clicked. Below is the structure of our html and client controller: <div class="icons"> <ul class=" ...

cssangularjscss-transitionsservicenow

Achieving Proper Alignment of Dropdown Menu in CSS

Currently, I am tackling the challenge of creating a responsive navigation bar. Despite my numerous attempts to troubleshoot, I am struggling to find a solution. My current issues are as follows: 1) On wide screens, I aim to center the dropdown menu benea ...

htmlcssdropdownnavigationbar

Struggling to replicate Bootstrap's col-md-6 with Tailwind CSS in React?

How can I make my box/form appear in the center of the screen with its width filling half or all of the screen? I've attempted using the w-full class on different elements but haven't been successful in adjusting the width. I am working with rea ...

cssreactjstailwind-css

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Hey there, I'm struggling to achieve the same row size of images as shown in the example. However, when I adjust the window size, the larger images become smaller than the columns on the left. This has been a challenge for me and I haven't found ...

csszurb-foundation

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

htmlcsslistcss-floathtml-lists

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

htmlcss

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

Wrapper Div at the Center

I'm currently working on aligning my webpage in the center using the following CSS: .wrapper { display: flex; align-items: stretch; background: #fafafa; /*max-width: 1520px; */ box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1); text ...

htmlcssflexbox

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

Unable to modify div style using a JS function

I am attempting to show different divs based on the button clicked, with all starting with a display style of "none" except for one default div called "atualizacoes". After clicking a button, all divs should be set to display="none", and then the specific ...

javascripthtmlcss

Using Google fonts offline: a step-by-step guide

Is it possible to download Google fonts and link them offline for a localhost webpage? ...

htmlcss

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

css

What is the best way to emphasize specific months and years in an Angular Material datepicker?

I have an array of days, which can be from any year. I am attempting to customize the Angular Material datepicker to highlight specific months and years in the selection views based on the array of days. .html <input [matDatepicker]="picker" ...

htmlcssangulartypescriptmat-datepicker

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Is there a way to turn multiple lines of text into a tooltip label that appears when hovered over?

My goal is to have underlined text that spans multiple lines and reveals a tooltip when hovered over. I've managed to include multiple lines in the tooltips, but I'm struggling with applying the labels correctly. I am completely new to HTML; I r ...

htmlcsstooltipmultiline

What is the best way to ensure that a list-group scrolls within a div instead of adjusting its height?

I have a div on my webpage that resembles a receipt. This div dynamically adds X items, with a full height of 95% for graphic design purposes. The problem arises when the div reaches 95% of the screen height and a new item is added, causing the entire page ...

htmlcssbootstrap-4

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

At the moment, I am utilizing ReactJS along with Material-UI. One issue I am encountering is that when using Material-UI's <Table>, the columns' width are automatically set based on content which results in all columns having equal width. H ...

javascripthtmlcssreactjsmaterial-ui

Maintain the header of a table at the top of the grid as you scroll

Although I know there are multiple ways to write this code, I have attempted (and fixed) it. Since I'm not well-versed in front-end development, I am finding this task to be quite challenging. I discovered that placing the table header within a table ...

javascripthtmlcss

Using jQuery's .is(":visible") method to check if an element, positioned absolutely outside of the viewport, is visible

I am currently exploring the most effective method to determine the visibility state of a div container with the CSS property position: absolute. On the left side of my viewport, I have a sidebar. By clicking the "sidebar-button," the sidebar smoothly tra ...

jquerycss