Positioned footer without predetermined height

I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below is the code I am currently using.

<%
ArrayList<MateriaBean> materieFooter=(ArrayList<MateriaBean>)session.getAttribute("materie");
%>
<div class="container footer-container">
    <div style="height: 10px"></div>
    <div class="col-xs-12  col-sm-9 col-md-9 center-column">
        <div class="col-md-12">
            <strong><p>Materie</p></strong>
            <hr>
            <%
                if (materieFooter != null) {
                    for (int i = 0; i < materieFooter.size(); i++) {
                        String mat = materieFooter.get(i).getNome();
            %>
            <ul class="list-unstyled col-xs-4 col-md-3">
                <li><%=mat%></li>
            </ul>

            <%
                }
            }
            %>
        </div>

    </div>
</div>

javascripthtmlcsstwitter-bootstrap-3

Answer №1

Have you thought about utilizing CSS Grid for this layout? For more information on CSS Grid, check out the detailed guide here.

body {
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-rows: 100px auto 30px;
}

header {
    background-color: steelblue;
}

main {
    height: 200px;
    background-color: darkgreen;
}

footer {
    background-color: gold;
} 
<body>
    <header>
        I'm the header!
    </header>
    <main>
        I'm the main!
    </main>
    <footer>
        I'm the footer!
    </footer>
</body>

Answer №2

This code essentially makes the webpage fill the entire window and then keeps the footer fixed at the bottom of it, regardless of the screen size.

html {
  position: relative;
  min-height: 100vh;
}

body {
  margin: 0 0 100px;
}

footer {
  background-color:#e5e5e5;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

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

Optimal Procedure for New Users Form (Jade / Angular) in HTML

I'm currently working on integrating a form into my app for users to create tasks. This form should only appear the first time a user attempts to create a task. As someone who is not very experienced with frontend development, I find myself wondering ...

htmlangularjsformspug

Finding the Middle Point of a Circle Using CEP/JavaScript

Using a specific set of calculations, I am able to create a circle in this manner: var yMinCir = height - 1515.80/2.667+8.5; var yMaxCir = height - 1545.80/2.667+8.5; var myCircle = page.ovals.add({geometricBounds:[yMinCir, 1312.63/2.667+8.5, yMaxCir, 1342 ...

javascriptadobe-indesignextendscriptadobe-extension

Resizing an HTML table causes the background to break

I have incorporated a tailwind table with a max-width setting. In my html, I am utilizing the default Laravel Jetstream layout. However, I am facing an issue wherein the background doesn't repeat in the browser when trying to use the scrollbar on sma ...

htmlhtml-tablebackgroundtailwind-css

What is the best way to adjust the placement of this object so it is anchored to the left side?

https://i.sstatic.net/k8aF1.png I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet: import React f ...

cssreactjs

Analyzing Compatibility and Ensuring Security

I recently started using Parse and have been exploring the documentation and answered questions. However, I still have a couple of inquiries on my mind. Firstly, I discovered that the Javascript SDK does not function on IE9 and IE8 without an SSL certific ...

javascriptrestsslparse-platform

Tips for preserving login session continuity following page refresh in Vuejs

signInMe() { this.$store.dispatch('setLoggedUser', true); this.$store.dispatch('setGenericAccessToken', response.data.access_token); this.errorMessage = ""; }, (error) => { if (error) { th ...

javascriptvue.jslocal-storagecommercetools

Discrepancy in functionality between Android and JavaScript Parse API

Using the open source version of Parse Server as a back end, my Android application saves objects to the server's DB in the form of key-value pairs encoded as JSON. However, when trying to retrieve the same object from an Ionic 2 app using the JS Pars ...

javascriptandroidjsonionic2parse-server

Creating a CSS path that incorporates two conditions simultaneously

I'm currently facing a challenge with finding the CSS path in this scenario: There are over 20 child nodes, and I need to identify every node that has fill attribute not equal to none. I understand that I can target a specific node using :nth-child( ...

htmlcssnode.js

Is there a way for me to reach a parent instance of a class from a child instance?

I am currently working on a project that involves a class called "Main" with an instance named "main". This "main" instance includes two properties from other classes, referred to as "player" and "background". My goal is to have the child instances interac ...

javascript

Creating PHP functions that return a JSON string when invoked - a simple guide

I have created a script that contains various functionalities, including fetching data from a database and encoding it into JSON. However, I want to be able to call different functions to execute these scripts separately. When I attempted to define and c ...

javascriptphpjson

Examples of how to specify a child class in CSS

Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...

css

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

Fulfill a pledge after a function has been run five times

I'm struggling to understand why my promise is not working as expected and how to resolve the issue. Here is the code snippet: let count = 0; function onLoad(){ count++ console.log(count); return new Promise((resolve) => { ...

javascript

Encountered an unexpected identifier error while executing a Nuxt.js project

I am utilizing the following technologies: Node.js version 6.14.2 NPM version 6.0.1 Ubuntu 16.04 Whenever I attempt to execute a project, I encounter the following error message: npm run dev node_modules/nuxt/lib/core/module.js:14 async ready( ...

javascriptvue.jsvuejs2nuxt.js

Issues with Javascript functionality on aspdotnetstorefront site

Lately, I've been facing some challenges with my Javascript and jQuery codes when trying to implement them in the storefront. Despite attempting different methods to create a slider, none seem to work within the store environment - even though they fu ...

javascriptjqueryaspdotnetstorefront

Setting up webpack for React to utilize multiple entry points and outputs

Having some trouble configuring the server to handle multiple entries and outputs. The application utilizes Zurb Foundation, jQuery, and React. I'm aiming to exclude jQuery and foundation from the bundle.js file, while also creating a separate bundle ...

javascriptjqueryreactjswebpackbabeljs

What is the method for implementing an Inset FAB with Material UI in a React project?

Currently, I am working on a project that requires an "Inset Fab" button to be placed between containers. After referencing the Material Design documentation, I discovered that the component is officially named "Inset FAB". While I was able to find some tu ...

javascriptreactjstypescriptmaterial-uinext.js

Experiencing difficulty converting a JSON array to a C# list during deserialization

With so many options available for serializing and deserializing JSON, it can be confusing to determine which one is the best choice. It's curious why there are multiple tools that seem to accomplish the same task. Some examples include JsonConvert, J ...

c#javascriptjqueryajaxasp.net-mvc

Updating a child component within a Modal: A step-by-step guide

I am using a global Modal component: export const ModalProvider = ({ children }: { children: React.ReactNode }) => { const [isModalOpen, setIsModalOpen] = React.useState(false); const [config, setConfig] = React.useState<ModalConfig | nu ...

javascriptreactjstypescript

What are some ways to stop the default event action from occurring when a parent HTML element has an event handler attached to it?

I have a bunch of hyperlinks on my webpage that I want to ajaxify so that clicking on a link deletes the associated item. I attached an event handler to a parent container like this: <div id="parent"> <a href='#' data-itemid='1& ...

javascriptruby-on-railsajaxjquery