I'm having trouble creating a sticky footer that stays visible regardless of how far the user scrolls on my page.
I want it to look like the version on the left, but I'm getting something different on the right
Here is the CSS I'm using:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* The bottom should be equal to the height of the footer */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Make sure to use fixed instead of absolute. For more information on CSS positioning, refer to this helpful link W3Schools.
Give this a shot:
position: fixed
https://jsfiddle.net/pablodarde/gyszqx99/
HTML
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie placerat ligula. Vivamus tempus mauris enim, pellentesque vehicula augue bibendum vel. Phasellus et ultrices risus, maximus posuere sapien. Vestibulum et condimentum nisl, sed facilisis turpis. Vivamus suscipit ultricies lorem et imperdiet. Aliquam ut semper ante, nec aliquet arcu. Phasellus ut magna et dolor hendrerit pulvinar sed vitae erat. Morbi ultrices tristique tristique. Donec sed condimentum risus. Nullam volutpat quam dolor, quis tempor massa ultricies non. Vivamus bibendum dapibus vehicula. Nunc molestie risus in orci lacinia dapibus.</p>
</div>
<div class="footer">
This is the footer
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.content {
width: 100%;
height: 2000px;
background: #f0f;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
background: #090;
color: #fff;
}
Imagine a setup where there is a banner at the top, with 3 divs placed side by side underneath it. The interesting part is that when you scroll down, only the center and right div should move along. #banner { background:blue; color:white; position ...
Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...
I am currently developing a React application, and the code structure is set up as follows: <Div> <Div style={{maxHeight:'60vh'}}> //This section includes the code for displaying a list item. Each item has its context menu that can ...
Is there any method in JavaScript to open a link in a new tab and add a div element on that page? Let's say I have a page called page1.html which has a div containing a link and two radio buttons "yes" and "no". I want to open the link in a separate t ...
Here is the HTML code snippet in isolation: <span style="position: relative; width: 100%; display: inline-block;"> <select id="0ac88542d16d6200fb983d094f655c76_select" class="form-control"> <option value="display_value">Numbe ...
I need assistance with using fpdf to convert dynamic site content to pdf. The issue is that fpdf does not support ul li tags. Is there an add-on available for fpdf that supports ul li and ol li tags in html? To provide more context: The content being con ...
Is it possible to customize the appearance of the calendar using css files from jquery-ui? <input type="text" id="dob"/> Check out this script: $(document).ready(function(){ $("#dob").datepicker(); }); See an example here. How can I style it ...
My goal is to configure a ul element with varying widths using flex. Specifically, I want the first two items in the ul to be 60% width while the last two items should be 40%. However, my flex-basis property doesn't seem to be working as expected. ...
On my React website, I am utilizing Tailwind CSS and I am attempting to showcase an image that has interactive elements. I want certain parts of the image to increase in size slightly when hovered over. My approach to achieving this was to save each part o ...
I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...
I am having trouble aligning the button on the right next to the email textbox. Unfortunately, my attempts have not been successful. Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/ <div class="col-xs-3"> <div class="fo ...
I've been attempting to add a contact form to my website, but unfortunately, it's not functioning as expected. Following this tutorial, I replaced the $myemail variable with my email address and gave it a try. While I do receive the "thank you" m ...
I'm encountering an issue while trying to assign click events to dynamically added HTML elements in jQuery. Despite extensive research within this community, I find myself more confused than before. Below is the snippet of code causing me trouble: v ...
Within my website, I have utilized the code font-family: 'Caesar Dressing',cursive,"brushsci"; However, it appears that two different fonts are being displayed on two separate pages. Please take a look at the font styles in the header menu of t ...
In a React component that I've developed, I have utilized ResizeObserver to track its own width. Within this component, two divs are rendered with each having a "flex: 1" property to ensure equal width distribution. Under certain conditions, such as w ...
I'm working on my portfolio website that will be available in two languages, Thai and English. I have successfully implemented language buttons for changing between the two languages. However, I am facing an issue with the language selection when nav ...
One feature on my website is a flex box that takes up the entire window with a width of 100% and a height of 100vh. Within this flex box, I've centered text and a button, but now I'd like to add a footer to the page. If I simply place the footer ...
Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...
After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...
I am currently working on a template driven form with a multiselect field named assets. My framework of choice is semantic UI. <div ngModelGroup="assets"> <div class="field"> <label for="resourceName">Assets</label ...