I'm having trouble keeping my footer at the bottom of the page:
body, html{position:relative;}
footer{position:absolute;}
Even when I use bottom: 0;, the footer doesn't seem to go all the way to the bottom. Is there anyone who can help me troubleshoot this issue?
Check out JSBin here or view it on JSFiddle here.
To ensure that the footer sits at the bottom of the screen, you should set a height or minimum height for your body element to cover the entire page.
html, body {
margin: 0;
padding: 0;
transition: all 1s;
font-family: "Trebuchet MS";
position:relative;
min-height:100vh;
}
footer{background-color:blue;width:100%;height:50px;position:absolute;bottom:0;}<body>
<header id="header">
<ul id="logo">
<li><i></i></li>
</ul>
<nav>
<ul>
<li><a href="login.php">login</a></li><!--
--><li><a href="signup.php">signup</a></li>
</ul>
</nav>
</header>
<main id="main">
<div id="login-form">
<form method="POST" onsubmit="return ValidateEmail();">
<i id="login-image"></i>
<span id="username-container"><input type="text" name="email" required="required" class="text" placeholder="Username / Email" onkeyup="ValidateEmail()" /><br/><span id="idea"></span></span>
<span id="password-container"><input type="password" name="password" required="required" class="text" placeholder="Password" /><span id="toggle-password"></span></span><br/>
<input type="submit" name="submit" value="Login" /><a href="/">Signup now ?</a>
</form>
</div>
</main>
<footer>
<i>COPYRIGHT © 2017</i>
</footer>
<body>Include dimensions and a color in the style.
footer {
background-color: navy;
margin: 0!important;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: white;
}
Can anyone help me create a table like the one shown here: The table should fetch data from my firebase database. Here is the structure of my requests database: . I've been trying to modify some code I found in a previous question. However, as you c ...
I'm currently working on a feature that resembles autocomplete, and instead of creating my own dropdown, I have decided to experiment with the use of < datalist >. I appreciate using native elements as they are compatible across various devices, ...
I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...
I have been working on creating a customized version of my Angular 1.4.12 application with nested views. The main purpose behind this customization is to accommodate sections within the app that require a header/content/footer structure, while others do no ...
I've been searching for a solution to my specific issue for days, but haven't had any luck. Can anyone provide assistance? I have a form on my website that is supposed to send an email when clicked, while also converting the div from a form to a ...
Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...
I recently started working on a website built with HTML/CSS and encountered an issue with links highlighting when hovered over. The problem arises from the main image on the homepage containing an embedded link, causing the area under it to also highlight ...
I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as ' instead. I managed ...
<script type ="text/javascript"> var current = 0; </script> <h3 style={{marginTop: '10', textAlign: 'center'}}><b>Current Status: <script type="text/javascript">document.write(cur ...
I've been working on a Joomla 2.5 template that consists of three main sections: top, container, and footer. While trying to set the "container" section to have a minimum height of 100%, I faced various challenges which led me to use jQuery for assist ...
I am new to using Selenium and I need help. I am attempting to retrieve all the image sources on a page in order to identify any images that have not loaded. How can I check the image sources? Can I use "null" as a check? Below is my code, which contains m ...
What is the best way to vertically center a div on lap-tops? (...) body {padding: 4% 16%;} body {top:0px; left:0px; bottom:0px; right:0px;} body {border: 12px solid darkred; border-style: double;} body {background-color: #FAFCB4;} p {font-size: 80%; text- ...
I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...
I am facing an issue with a function that generates XML from a source. Everything works perfectly except for when certain fields are too long, causing the table to stretch and mess up the website formatting. Is there a way to automatically insert line brea ...
In my React app, I am creating a keyboard using the following component: Keypad.js const Keypad = () => { const letters = [ 'Q', 'W', 'E', 'R', 'T', ...
In this scenario, I have a div with the class name old. There is also a button that, when clicked, should toggle the div's class name between old and new. I am looking for a solution using Angular 6. Below is the code snippet: I am relatively new to ...
Recently, I managed to create a side navigation using the target function in CSS3. However, I am curious about how I can achieve the same result using jQuery without disrupting the layout. Any assistance would be greatly appreciated. Here is the code sni ...
I have successfully developed a simple web page using PHP and HTML. However, I am facing an issue in displaying the username after login. Additionally, I would like to hide the login and signup sections after successful login. Can anyone provide assistance ...
I had a developer set up my website in osCmax a while ago, and now I want to update the design of some pages using HTML and CSS on my own. While I am comfortable with HTML and CSS, I have very limited knowledge of PHP. This is my first attempt at working o ...
Is it possible to position the table using <div> elements? ...