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;
}
I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...
Seeking a way to incorporate a redirect on my Joomla site that leads users to a mobile-friendly HTML5 app. After much thought, I've put together the following script: <script type="text/javascript> <!-- if (screen.width <= 800) { ...
In my Angular project, I am working on a mat dialog box and trying to achieve a layout with 1 row at the top and 3 rows at the bottom, similar to the image below. However, I am facing issues in making it work properly. Additionally, I want to hide the hori ...
INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...
Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...
Looking to create a fixed-header that includes clickable links on the left and our logo on the right. Encountering an issue when trying to make the header take up the full width of the screen in its fixed position. The header's width seems to shrink ...
I am currently developing a website that relies on ajax to load its inner pages. However, I need certain groups of pages to have background and container width changes as well. Is there a way for me to use conditional if statements to modify the class or ...
I'm currently working on a feature that allows users to upload files to a page using an button. Each file is displayed in a table as a new row. I am looking for a way to set the background color differently for odd and even rows. As of now, I am usin ...
Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...
I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...
Is there a way to retrieve the page name from the address bar using jquery or javascript instead of PHP? I am working on an HTML website and would prefer not to use PHP for this specific task. For example, if the address is www.mywebsite.com/hello.htm, ho ...
Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...
When working in an embedded ruby (html.erb) file, I encounter a situation where I have a string of HTML such as variable_string = "<p>Some <strong>Content</strong></p>". In JavaScript, we can easily update the DOM with Element.inn ...
In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...
For my HTML timeline view, I encountered an issue that I'm hoping to resolve: I have a table row with 12 cells representing the 12 months, each with a colspan based on the number of days in that month. Another row in the same table contains the indiv ...
I am seeking assistance in changing the font of text using classes. I have multiple texts with different classes and I want to be able to edit all the texts without adding another dropdown menu. I believe that the change needs to occur in a script. Pleas ...
Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you in advance! This is the HTML <div class="carouselle"> <div clas ...
I'm facing an issue with the code snippet below. var bar = { ajaxcall : function(){ var _obj = {}; $.ajax({ headers: { 'Content-Type': "application/json; charset=utf-8", 'da ...
When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...
My PHP Array looks like this: $fruits = array( array("Apple", 1.25), array("Banana", 0.86), ); Desired HTML Output: I want the HTML output to be formatted as follows: Fruit: Apple Price: 1.25 Fruit: Banana Price: 0.86 Attempts Made: I tried ...