Persistent Footer - Attemping to keep footer anchored to the bottom of the page

Today, I am facing a sticky footer issue that is rather frustrating for me. Despite trying various resources and conducting thorough searches, I am unable to identify what is causing the problem with my footer. I would greatly appreciate any help in resolving this issue. Thank you!

html {
  height: 100%;
}

body {
  background: url('footer_lodyas.png') fixed;
  font-family: 'Sahitya', serif;
  max-width: 100%;
  margin: 0 auto 0 auto;
  overflow-x: hidden;
  height: 100%;
}

.all {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto;
}

#footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  background: #1FA0A3;
  font-size: 16px;
  font-size: 1.6rem;
  border-top: none;
  padding: 20px;
}
<body>
  <div class="all">
    <div class="wrapall">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
        venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
        id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
        diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
        tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
        suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
        luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
        pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
        et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
        commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
        vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
        Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
        arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
        vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
      </p>
      <div id="footer_links"></div>
    </div>
  </div>
</body>

htmlcss

Answer №1

Make sure to place your footer div outside of the .all and .wrapall divs. Here's an example: https://jsfiddle.net/fb3uno9s/

html {
    height:100%;
}

body{
    background: url('footer_lodyas.png')  fixed ;
    font-family: 'Sahitya', serif;

    max-width:100%;
    margin: 0 auto 0 auto;

    overflow-x: hidden;
    height: 100%;

    }


  .all{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;

}


#footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  background: #1FA0A3;
  font-size: 16px;
  font-size: 1.6rem; 
  border-top: none;
  padding:20px; 
}

<div class="all">
<div class="wrapall">
<p>
 Your unique content here...

</p>
</div>
</div>


<div id="footer_links"></div>

Answer №2

If you're looking to create a sticky footer, you can utilize the display: flex; property. From the code provided, it seems like there may be a lack of implementation for achieving a sticky footer.

.wrapall {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapall p {
  flex: 1;
}


html {
  height: 100%;
}

body {
  background: url('footer_lodyas.png') fixed;
  font-family: 'Sahitya', serif;
  max-width: 100%;
  margin: 0 auto 0 auto;
  overflow-x: hidden;
  height: 100%;
}

.all {
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
}

.wrapall {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapall p {
  flex: 1;
}

#footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  background: #1FA0A3;
  font-size: 16px;
  font-size: 1.6rem;
  border-top: none;
  padding: 20px;
}
<body>
  <div class="all">
    <div class="wrapall">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
        venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
        id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
        diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
        tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
        suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
        luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
        pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
        et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
        commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
        vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
        Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
        arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
        vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.


      </p>


      <div id="footer_links">

      </div>
    </div>

  </div>
</body>

Answer №3

Give this a shot: try using viewport height units (vh)

.wrapall {
    height: 100vh;
    position: relative;
}

#footer_links {
    background: #1fa0a3 none repeat scroll 0 0;
    border-top: medium none;
    bottom: 0;
    font-size: 1.6rem;
    padding: 20px;
    position: absolute;
    text-align: center;
    width: 100%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on how to use JavaScript to make an HTML5 input field mandatory

I am facing an issue with setting input fields as required based on radio button selection in a form. Initially, all fields should have required=false, but I'm unable to achieve this. No matter what value I assign to the required attribute, it always ...

javascripthtmlrequired

The alignment of the rows and columns is off, causing the image to shift onto a separate row altogether

Struggling to configure the header section of my website, specifically dealing with the mobile class. I'm attempting to set up a col-xs-7 with an h1 tag and two p tags, along with a col-xs-5 containing an image. However, the col-xs-7 is taking up the ...

htmlbootstrap-5

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

javascripthtml

The amazing property of AngularJS - Scope

I have saved this HTML code in a file. Here is the HTML : <!-- checkbox 1 --> <input type="checkbox" name="checkbox1" id="checkbox-group1" ng-model="checkbox1" value="group1"> <input type="checkbox" name="checkbox1" id="checkbox-group2" ng ...

javascripthtmlangularjsradiobuttonlist

Using Rails to assign a page-specific CSS class within a shared layout

Is there a way to apply unique CSS classes to specific tags within a common layout? In my application.html.erb layout file, the application.css.scss is loaded using <%= stylesheet_link_tag "application". . . %>, which then includes all CSS files in ...

cssruby-on-railserb

Activating the submit button only following confirmation that the image dimensions have been verified

I've written some code that checks whether selected pictures meet specific size and dimension constraints before enabling the submit button. However, there's an issue where the button might be enabled before verifying the last image due to delays ...

jqueryhtmlfile-upload

Center alignment is not being applied to the SVG element

I am currently working with React and when my component renders, it displays an SVG inside a div. Here is a snippet of the code: render() { return( <div class="myClass"> <svg> ... </svg> </div> ); ...

htmlcssreactjssvg

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

javascripthtmljquerycsssharepoint

What is the best way to position the top line next to the border?

I've been attempting to create a falling line effect on the left side of the box's border, but I can't seem to figure out what's causing the issue. Below is the code snippet: @import url('https://fonts.googleapis.com/css ...

htmlcss

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

What is the best way to ensure the footer remains in an automatic position relative to the component's height?

I am struggling to position the footer component correctly at the end of my router-outlet. After trying various CSS properties, I managed to make the footer stay at the bottom but it acts like a fixed footer. However, I want the footer to adjust its positi ...

htmlcssangularangular-material

Implementing the style tag within a view

In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file. While this method may seem to work without issue, it actually places the <style> tag within the & ...

c#cssasp.net-mvcmodel-view-controller

What is the process of including a CSS class in a NAV anchor tag on WordPress?

I recently started using Bootstrap 4 and have structured my menu in the following way: <ul class="navbar-nav mx-auto justify-content-center"> <li class="nav-item"> <a class="nav-link" href="index.php">HOME</a> </ ...

phpcsswordpressbootstrap-4

After deployment, certain formatting elements appear to be skewed in the React application

After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected. The majority of the styling from Material UI is intact, but there are a few dis ...

cssreactjsdeploymentmaterial-uistyles

Finding JPG images using Jquery selector

I am looking to utilize jQuery to specifically target <a href=""> elements that have 'href' attributes with file extensions '.JPG' or '.jpg' For instance: To only select these 'links' <a target=& ...

jqueryhtml

Is there a way to retrieve all CSS styles associated with a specific element?

When I come across a site element that I really like and want to incorporate into my own site, what is a simple way to do so? It can be challenging to navigate through numerous CSS files to find all the necessary styles. ...

htmlcss

What is the best way to verify all the UL elements within a hierarchy of checkboxes

Query: In my category listings, some categories have children. I am attempting to implement an "ALL" category that, when selected, will automatically check all sibling checkboxes in the same category. For example, clicking on ALL under the MUSIC category ...

jqueryhtmlcss

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

cssiosjquery-mobileuiwebview

Using Single Quotes as Parameters in JavaScript

I'm currently facing an issue with a function that is designed to populate a field in the parent window when clicked. Specifically, it is meant to fill in a text field with a name. The challenge I am encountering arises when the field contains a sing ...

javascriptasp.nethtmlsyntaxparameters

Implementing CSS styles based on the count of elements

Within my react js project There is a particular block that may contain either one or two elements, depending on the runtime conditions. For instance: Scenario 1: (two groups are present) <div class='menu-list'> <div class='g ...

css