How can I position the footer at the bottom of the window without it overlapping with my other divs?

Having trouble with the footer overlapping other div and product cards when generated by AngularJS

I attempted to place it inside some divs other than in the body, but the issue persists

<!DOCTYPE html>
<html>
<head>
<Title> 
Search Your City
</Title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <link rel="stylesheet" href="css/liststyle.css">
<script src="script/myscript.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">


 <div class="container" >
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />

 <link rel="stylesheet" href="css/main.css">
<div class="s003">


<form>

<div class="inner-form">
                 <div class="input-field second-wrap">
                <input id="search" type="text" placeholder="Enter Keywords?" />

                   </div>

     <div class="input-field third-wrap">

     <button class="btn-search" type="button">
      <svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70....
....png?size=50x50&set=set1"},
{"id":21,"name":"Holdlamis","address":"Philippines","price":68,"availability":true,"image":"https://robohash.org/eumprovidentarchitecto.jpg?size=50x50&set=set1"},
// Additional records would go here...
]
});

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Tried to ensure that the footer is set to the bottom of the window, however, it's either taking up space above the top nav bar if placed directly in the body or overlapping the product cards if positioned inside their container.

Please refer to the liststyle.css for additional styling:

// CSS styling goes here...

Main CSS file (main.css) provides additional styles:

// More CSS styling info...

And here’s what you’ll find in myscript.js:

// JavaScript code for functionality...
// Includes scripts for responsiveness and navigation controls

Answer №1

Here is the solution, in your footer CSS position was set to: Absolute

HTML:

<!DOCTYPE html>
<html>
<head>
<Title> 
Search Your City
</Title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <link rel="stylesheet" href="css/liststyle.css">
<script src="script/myscript.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">


 <div class="container" >
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />

 <link rel="stylesheet" href="css/main.css">


<form>

<div class="inner-form">
                 <div class="input-field second-wrap">
                <input id="search" type="text" placeholder="Enter Keywords?" />

                   </div>

     <div class="input-field third-wrap">

     <button class="btn-search" type="button">
      <svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
      </button>

      </div>

</div><!--inner form-->
</form>




<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="home.html">Home</a>
       <a href="#help">Help</a>
      <a  id="myBtn"  href="#registrationpage">Sign Up</a>
      <a  id="myBtn1" href="#Loginpopup" >Login</a>
      <a href="#adminpage">Admin</a>
</div>


       <div class="topnav"  id="myTopnav">
        <a href="#hack"></a>
      <a href="home.html">Home</a>
       <a href="#help">Help</a>
      <a  id="myBtn"  href="#registrationpage">Sign Up</a>
      <a  id="myBtn1" href="#Loginpopup" >Login</a>
      <a href="#adminpage">Admin</a>
   <a href="javascript:void(0);" class="icon" onclick="openNav()">
    <i class="fa fa-bars"></i>
  </a>
    </div>



<div class="acontainer">
<div class="card"  ng-repeat="x in records" style="margin:0 12px 12px 0;">
  <img src={{x.image}} alt="hotel image " ALIGN="left"   >
  <h1 >{{x.name}}</h1>
  <p class="price">{{x.price}}</p>
  <p>{{x.address}}</p>
  <p style="text-align:center"><button>Add to Cart</button></p>
</div>

</div>

<footer>
      <p>Moji Web Design, Copyright &copy; 2019</p>
    </footer>

</div>
</body>



</html>

CSS :

body, html {
  height: 100%;
  margin: 0;
}




/* Position the navbar container inside the image */
.container {
  position: absolute;
  float:left;
  margin: 20px;
 width: 100%;
 border-bottom: 0.5px solid #e6e6e6;
}

/* The navbar */
.topnav {
   float:right;
  overflow: hidden;
 // background-color: #333;

}

/* Navbar links */
.topnav a {
  float: left;
  color: #190808;
  text-align: center;
  padding: 24px 24px;
  text-decoration: none;
  font-size: 18px;
    right=42px;
    font-weight:1200px;
    border-bottom: 3px solid transparent;
}
a:last-of-type{



}
.h{



}


.topnav a:hover:not(:first-child) {

  border-bottom: 3px solid black;

}


.h input{
border:none;
focus:none;
}


.topnav .icon {
  display: none;
}

@media screen and (max-width: 1200px) {
   .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

.card{
position:relative;
top:50%;
width:100%;
}

}


@media screen and (max-width: 1200px) {
  .topnav.responsive {  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
 right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;    }



  .topnav.responsive a {
     padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  }
}

.responsive a:hover{
  color: #f1f1f1;
}

.topnav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}








fieldset {
padding: 0.35em 0.75em 0.625em;
}


fieldset {
margin: 0;
padding: 0;
-webkit-margin-start: 0;
 -webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
 border: 0;
}







* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}


.card {
  box-shadow: 0px 8px 8px 0px   rgba(0, 0, 0, 0.2);
  float: left;
  width: 24%;
  padding: 0 20px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: 0;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 150px;
  font-size: 18px;
}




.acontainer{
 position: absolute;
  top: 214px;
  left: 12%;
  right:12%;




}
.card button:hover {
  opacity: 0.7;
}
@media screen and (max-width: 992px) {


.card{
position:relative;
top:50%;
width:100%;
}


  }



@media screen and (max-height: 450px) {
  .responsive {padding-top: 15px;}
  .responsive a {font-size: 18px;}
}

footer{
width:100%;
bottom:0;
  padding:20px;
  margin-top:20px;
  color:#ffffff;
  background-color:black;
  text-align: center;
height:240px;
}

Js Fiddle link for preview

Answer №2

If your situation calls for it, you should consider removing the position property and adding the clear property instead.

The clear CSS property dictates whether an element should be placed below (cleared) floating elements that come before it. This property is relevant for both floating and non-floating elements. MDN Web Docs - Clear CSS.

This particular set of specifications has proven to work well for me:

footer{
    clear: both;
    width:100%;
    bottom:0px;
    padding:20px;
    margin-top:20px;
    color:#ffffff;
    background-color:black;
    text-align: center;
    height:240px;
}

UPDATE: To create a full-width footer at the end of the page, follow these steps:

  • Remove the position property
  • Get rid of the bottom property
  • Set display to inline-block, to position it after your container div.
  • Adjust the margin-top to 240px, to place the footer after your container div.

In addition, modifications are needed for the container div:

  • Change the position to relative
  • Update the width to 76% (taking into account the 12% on each side).

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

Modify the color of every x number of rows on an HTML table

Is it possible to change row colors in a table every x rows, instead of every single row? For example, here is what the alternating rows could look like when changing every 2 rows: JSFiddle The structure of the HTML table would be something similar to th ...

The placement of footers remains consistent

Struggling with the placement of my footer on a website I'm designing. The footer should be at the bottom of the page with a set percentage margin, but it's not working as expected. Here is a link to My website Reviewing the footer CSS: .foote ...

Adjust the position of the remaining li elements to accommodate the increased height of a single li element

I am currently working on a dropdown menu and I'm encountering an issue where, in the second level of <ul>, if the height of an <li> increases due to accommodating another <ul>, the other <li> elements in the second level do no ...

Incorporate blocks into the text input box, reminiscent of how email applications manage to field

Seeking assistance with coding a header for a compose message page in a web application, utilizing HTML, CSS, and JS. The main query is about how to implement the functionality of converting selected email addresses into a box, as showcased in the image b ...

In Angular 2, transferring data from a parent route to a child route

I have set up a route named "home" with three child routes: documents, mail, and trash. Within the home route component, there is a variable called 'user'. While I am familiar with various methods of passing information between parent and child c ...

Methods for incorporating JSON Data into ChartJS

Below is my app.js file: app.js var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope, $http) { $http.get('http://happyshappy.13llama.com/wp- json/llama/v1/stats').then(function(response) ...

Angular Bootstrap dropdown menu opens on the left side for items

When using ngbDropdown, the default alignment of drop down items is on the right side. However, if the drop down alignment is too far to the right, the item may become invisible. Below is the HTML code: <div ngbDropdown class="d-inline-block float_rig ...

Confirmation for deletion in HTML form

Is there a way I can include a confirmation message for deleting an item on my form button? Any suggestions on which JavaScript code to use? <script type="text/javascript"> function confirmDelete() { return confirm("Are you sure you want to delete ...

Implementing Bootstrap 4 Beta's server-side validation post error resolution

I'm currently working with Bootstrap 4.0.0.beta and am facing an issue with server-side validation. When adding the .is-invalid class to inputs that were invalid upon submission, even after the user corrects the error, the class remains, potentially c ...

Showing error messages to users with Angular and Firebase

As a beginner in Angular JS, html, and css, I am facing a challenge with routing in my login component. When the user clicks submit, the application should redirect to the landing page upon successful authentication or return to the login page with an erro ...

How do I print a QTableWidget using QT5 and resize the table to fit perfectly on one side of an A4 sheet?

My QT5 application is designed to generate a monthly rota/timesheet in csv format, which can be easily read and printed using Excel or LibreOffice. However, I want to enhance the functionality by printing the table directly from Qt to the printer. I have ...

I need to retrieve the latest ID after creating a new record through a web API and angular resource

Utilizing Web API and Angular Resource to handle my application, I am facing an issue with retrieving the new saved record ID when using the Save method in my controller... Even though my web API method sends back the new ID in the response Created Messag ...

Tips on utilizing the event.preventDefault() method within AngularJS?

Recently, I stumbled upon a technique to prevent page refreshing after submitting a form by using event.preventDefault();. As someone who is still learning Angular, I am unsure of how to incorporate this syntax into my Angular controller. Is "event" some s ...

How can the HTML email width be adjusted on Outlook 2016?

When I send out HTML emails, I encounter an issue where the content takes up the full width no matter what. I have tried adjusting the width of table, tr, td, div, and body elements, but it still persists. This problem occurs on Outlook 2016 across all W ...

Troubleshooting Problem with Updating Angular Kendo to the Newest Version

We have been dedicated to a project for the past three years, utilizing Angular 1.2.6 and Kendo UI version 2014. However, due to performance requirements, we are looking to transition to Angular 1.6 and Kendo UI version 2017. During this migration process, ...

How do I trigger a click event on an autocomplete search bar in Vue with a router link enabled?

I'm working on an app that is similar to Github, and I want to create a search bar functionality just like Github's. However, I'm facing an issue with my search bar located in the navbar option section as it doesn't seem to register any ...

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

Incorporating interactive maps into an AngularJS web application

I've been attempting to integrate Google Maps into my AngularJS application, using the script tag below: <script src="https://maps.googleapis.com/maps/api/js?key=[MySecretKeyHere]&callback=initMap" async defer></script> I found this ...

Utilize custom {tags} for replacing strings in a CSS file using str_replace in PHP

My code consists of a script that updates a CSS file based on user input from an html form. The script executes a str_replace function, scanning the CSS file for specific "tags". For example: html,body { background: {bgcolor} url(../images/bg.jpg) re ...

Angular index.html file can include a conditional script

I am currently working on an Angular project, where the index.html serves as the main entry point for the application, just like in any other Angular project. This file contains important links and configurations. Within the HTML code snippet below, you w ...