Today I've been working on creating a footer using CSS, but no matter what I tried, I couldn't get it to move to the bottom. Here is the code I'm currently using:
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: red;
}<div id="footer">
<p>TEST TEXT</p>
</div>However, this is the result I'm seeing:
Here is a suggestion
body {
padding: 0;
margin: 0;
min-height: 100vh;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
background: red;
width: 100%;
height: 50px;
}<body>
<div id="footer"></div>
</body>Position absolute relies on its ancestor (position relative) for placement, but if there are no positioned ancestors, it will default to the document body and move along with page scrolling.
For best results, consider placing your div#footer directly inside the body element.
<body>
<div id="footer">
<p>
This is a test text.
</p>
</div>
</body>
To prevent overlapping with its ancestor, make sure to add a left property in your CSS as shown below:
#footer{
position: absolute;
bottom: 0;
left: 0; //<---- Add this line
width: 100%;
height: 60px;
background-color: red;
}
There is no content above the footer in your DOM, so the bottom: 0px property will not work as expected. If you only have the footer element in your DOM and you want to position it relative to the window size, consider using values in "vh". Here is an updated snippet that may help achieve what you are looking for:
#footer {
position: relative;
bottom: 0px;
width: 100%;
height: 60px;
background-color: red;
margin-top: 100vh;
}<div id="footer">
<p>TEST TEXT</p>
</div>Ensure your HTML has a height of 100% as well
html, body {
min-height: 100%;
}
You may want to set your footer to display:fixed; so it stays at the bottom of the page even when scrolling.
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: red;
}
As a best practice, consider changing your footer from an ID to a Class in your CSS (replace # with .).
It may be challenging to provide an accurate solution without having a complete view of your HTML code, but it seems like you need to set the height: 100% for both the body and html elements. Additionally, ensure that your footer is contained within an element with position: relative; so that it aligns to the bottom of that specific element.
html, body {
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: red;
}<div id="footer">
<p>TEST TEXT</p>
</div>Whenever I input new data into my table, the data does not get highlighted as expected. However, the existing data in the table gets highlighted with no issues. Can you please help me troubleshoot why my code is not functioning correctly? Thank you. The f ...
I recently began using FontAwesome and it's been going well. However, I have a question about using it with an anchor tag that has text-decoration:none, and on hover text-decoration:underline. Whenever I hover over the link, the icon also receives the ...
I am developing a small grocery shopping application. My goal is to create a page where users can view the contents of their shopping cart by clicking a button. I have designed a template that displays the contents in a white space. The idea is to store ...
I need to implement a feature where I can select multiple items using checkboxes and retrieve them when a popup is closed. Here's what I want to achieve: Is there a way to accomplish this? Imagine I have a div with several items, and I want to displ ...
I am working on building a navigation system similar to Google Play, where there are fixed tabs for browsing through the app. I have created a container div that holds various content sections. <div id="container"> <div class="section"> .. ...
My goal is to utilize the Noto Sans Arabic font within my React material UI theme. Everything seems to be functioning correctly, including overrides. Despite consulting the React Material UI documentation and attempting to follow similar steps as outlined ...
#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...
Before asking this question, I made sure it's not a duplicate by researching previous similar issues with no success. I'm currently utilizing Bootstrap 4. You can view my app at (I'm unable to post the CSS and HTML of my React app due to S ...
I am currently working on an HTML5 application that features a screen divided into two parts. The left part of the screen contains a few links, and upon clicking one of these links, the resulting content should open in the right side frame within the same ...
I want to trigger a popover when a variable exceeds a certain value, triggered by clicking a button: $(function () { $('[data-toggle="tooltip"]').tooltip({ trigger: 'manual', placement: 'top', titl ...
This is my first attempt at creating a chrome extension, and I am currently working on centering text. Right now, I am using text-align: centre; to align the text horizontally, but I am struggling to figure out how to align it vertically. As a result, my t ...
After reading a variety of resources and examples, I still feel like I'm missing a deeper understanding of the fundamental concepts behind server-side functions and their interaction with HTML. Recently, I was able to successfully manipulate an array ...
I'm currently attempting to showcase a ::before pseudo-element on a <progress> bar in the form of a label featuring the value attribute. My current approach successfully displays the ::before element in Brave (v1.61.109), but unfortunately, it d ...
I really love the smooth auto zoom in and out effect on this website: , especially for the banner images at the top. I tried to recreate it by inspecting the developer tools in my browser, but I'm having trouble implementing it as some properties are ...
Today, I came across an intriguing observation. While browsing through code, I noticed that text was being transformed to uppercase using CSS instead of the common JavaScript method toUpperCase(). Surprisingly, this approach caused a test to fail. The test ...
Within my HTML document, the following code snippet is present: ... <div class="tab-pane fade" id="account-notifications"> <div class="card-body pb-2"> <h6 class="mb-4">Activ ...
After searching extensively, I have been unable to find exactly what I am looking for. The closest matches only cover a portion of my needs which include: I am seeking a randomly selected color scheme that I have created but not yet implemented in code. T ...
Once more, I find myself in need of your assistance. I am facing an issue with my project. Specifically, on my menu, I want the selected option to have a bottom border and the text aligned vertically. However, using vertical-align : middle with a display ...
How can I change the color of specific keywords in a gridview cell without affecting all words? Here is the sample code: protected void gvContents_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) ...
Looking for some help with this specific code snippet .selection_user { display: block; background-color: #2D2C31; text-align: center; line-height: 75px; } <div class="select_user_menu"> <div class="selection_user">User1</div> ...