Question posted in 
When I am trying view my web pages on Ipad or Ipad Pro(using google chrome developer tools) the footer is not staying at the bottom at the page. I have no issue whatsoever when viewing on mobile devices/smartphones and desktop.
I have only included the CSS code that concerns the footer.
Can anyone give me a hand with this please?
footer {
background: #212529;
color: white;
bottom: 0;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #ced3d7;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<title>Home|The Monkees</title>
</head>
<body>
<header>
<!--------------------Navigation-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">
<a class="navbar-brand" href="index.html">
<img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " id="navbar-select-color" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color2" href="photos.html">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color3" href="video.html">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color4" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Contact Us Section -->
<section class="Material-contact-section section-padding section-dark">
<div class="container">
<div class="row ">
<!-- Section Title -->
<div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
<h1 class="section-title">Love to Hear From You</h1>
</div>
</div>
<!-- contact form -->
<div class="col-md-12 wow animated fadeInRight " data-wow-delay=".2s" id="centerForm">
<form class="shake" role="form" method="post" id="contactForm" name="contact-form" data-toggle="validator">
<!-- Name -->
<div class="form-group label-floating">
<label class="control-label" for="name">Name</label>
<input class="form-control" id="name" type="text" name="name" required data-error="Please enter your name">
<div class="help-block with-errors"></div>
</div>
<!-- email -->
<div class="form-group label-floating">
<label class="control-label" for="email">Email</label>
<input class="form-control" id="email" type="email" name="email" required data-error="Please enter your Email">
<div class="help-block with-errors"></div>
</div>
<!-- Subject -->
<div class="form-group label-floating">
<label class="control-label">Subject</label>
<input class="form-control" id="msg_subject" type="text" name="subject" required data-error="Please enter your message subject">
<div class="help-block with-errors"></div>
</div>
<!-- Message -->
<div class="form-group label-floating">
<label for="message" class="control-label">Message</label>
<textarea class="form-control" rows="3" id="message" name="message" required data-error="Write your message"></textarea>
<div class="help-block with-errors"></div>
</div>
<!-- Form Submit -->
<div class="form-submit mt-5">
<button class="btn btn-common" type="submit" id="form-submit"><i class="material-icons mdi mdi-message-outline"></i> Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="mainfooter bg-dark" role="contentinfo">
<div class="footer-middle">
<ul class="social-network social-circle">
<li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.youtube.com" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
</ul>
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2019 - The Monkees. All rights reserved. //<a href="about.html"> About </a> //<a href="terms_of_use.html"> Terms of Use </a> //<a href="contact.html"> Contact </a></p>
</div>
</div>
</footer>
</body>
</html>
4
Answers
@DCR This would be the complete CSS code.
Bei adding
to your footer it will be on the bottom and 100% width – so your css should look like:
you had an extra div closing tag just before the closing section tag. Try deleting that and see if that solves the problem. If not, we can try position:absolute
After all I have managed to find a resolution by myself.
I will post what I did here, just in case someone runs into this issue.
The solution will depend a little on the rest of your CSS page. It can take some trial and error to find the one that works for you. I went for the calc() method.
You wrap all your content in a new div with a class name of “content” on it. Making sure to close this div right before the footer is opened.
Then you use devtools to find out the height of your footer, and use the calc() method to give the the .content class a minimum hieght that is equal to 100% of the view height minius the height of the footer.
.content {min-height: calc(100vh - /* height of footer here */);
}