Make sure the footer stays at the bottom of the page when the page height is short

I need to place a footer on my webpage in a specific way:

  • It should be at the bottom of the page, even if the content in the main-container is short. In this case, a large vertical margin needs to be added that calculates as 

    height(viewport) - height(main-container) - height(header)
    .

  • The footer needs to be within the normal flow of the body, appearing after the <div id="main-container">, without using position: fixed or position: absolute.

  • If the main content in the main-container is lengthy (more than one page), then only a small margin should separate the main-container and the footer (opposite to the first point).

How can I achieve this?

#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }
<div id="header">Header</div>
<div id="main-container">
Hello<br>
World
</div>
<div id="footer">
Bye-bye. <-- this should stay at the bottom even if main-container has minimal content
</div>

htmlcssfooter

Answer №1

It appears to be a potential duplicate of Fill remaining vertical space with CSS using display:flex

You might want to consider using flex and flex-grow for this issue.

body {
display:flex;
flex-flow:column;
min-height:100vh;
margin:0;
}
#main-container {
flex:1;
}
#footer {}


/* = */
#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }
<div id="header">Header</div>
<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

For more information, check out this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

Here is the code snippet you requested:

#footer {  position: absolute; bottom: 0; width: 100%; height: 2rem; }
#main-container { padding-bottom: 2rem; }
<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

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

What is the best way to align a badge icon regardless of the avatar's size?

I'm working on creating an avatar component with badges. However, I'm facing an issue with the positioning of the badges relative to the avatar size. The image below provides a clear illustration of the problem. Can you guide me on adjusting the ...

javascriptcssreactjssass

Retrieve CSS hover values using jQuery

When the page is loaded, I need to execute a function that retrieves the CSS background image settings as well as the hover background image setting, which I intend to use in a different way. The only technique I have come across requires an actual mouseo ...

jquerycssbackground-image

Tips for combining data within an array in a PHPExcel report

Looking to concatenate my array values in order to generate a PHPexcel report in Excel, but struggling to make it work. Can anyone offer assistance with this issue? Here's a visual representation of the desired outcome: "Buenavista, Agusan del Norte" ...

phphtmlmysqlsqlphpexcel

Preventing background image repetition in Internet Explorer

I'm having an issue that seems simple but I can't figure out what's wrong. The background image repeats perfectly in non-IE browsers, but not in IE8. For reference, the site is located at: #wrapper { max-width:100%; min-width:1000 ...

cssbackground-imagerepeat

Verify the validity of a form using JavaScript and by utilizing HTML5 validation, then proceed to save the form data in local storage

I'm fairly new to working with JavaScript and jQuery. Currently, I am attempting to validate the HTML5 validation of a form using JavaScript. When the form is valid, I want to save the data in localstorage WITHOUT having to reload the webpage. Here is ...

javascriptphpjqueryhtmlvalidation

Strategies for transferring user input data to a function in view.py

Purpose: ** The goal is to pass the input value itemnumbervalue to the function itemnumber() in views.py > Issue encountered: The method object is not subscriptable at line 17 in view.py Attempted solutions: Case 1: Tried using both [] and () bra ...

htmldjangodjango-formsdjango-viewsdjango-templates

Wowslider is functional, however it fails to show the images

As a brand new user with limited knowledge, I am determined to figure things out on my own and make progress. Currently, I am using Wowslider on my website to showcase images. Although the slider (carousel) is functioning properly, it is not displaying a ...

jquerycsswowslider

Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...

jquerycsshtmlcordovajquery-mobile

Difficulty in centering two equal-sized columns in a Bootstrap 3 row with an offset

Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/ I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row. The desired effect is to center both of these columns inside the .row, ensuring ...

htmlcsstwitter-bootstrap

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

javascriptpythonhtmlflaskweb-applications

"Short-term" variation not appearing within the Material-ui Drawer component

I am attempting to create a responsive drawer component using material-ui, where it is toggleable on smaller screens and remains open on desktop. Following the mui documentation, I added the temporary variant to the drawer, but it does not display in desk ...

htmlcssreactjsmaterial-ui

Angular.js: Oops! Looks like the 'MyApp' module is missing

Can anyone help me with using this plunk locally on my machine? I've been trying to run it with the local Python server or http-server, but I keep encountering this Error message: Uncaught Error: [$injector:modulerr] Failed to instantiate module myAp ...

javascripthtmlangularjsmodule

Experiencing challenges during the creation of a NUXT build

Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...

cssvue.jswebpacknuxt.js

Adjust the header width and column alignment when freezing the header in a gridview interface

Looking to implement a gridview with a fixed header? I've tried various solutions including this link and this one. While I've managed to get it working, the main issue lies in the alignment of header width and column width. The scroll and freez ...

htmlcssasp.netgridview

Is there a way to extract content from an HTML <span id> using Python, Selenium, and BeautifulSoup?

I've been working on a project to create a web scraping tool using Python, Selenium, beautifulSoup, and pandas to generate a .csv report. Unfortunately, I'm facing an issue with extracting the "data-date" text from the HTML snippet below. Specif ...

pythonhtmlpandasseleniumbeautifulsoup

Enhancing w3-import-html with JavaScript

<div id="import" includeHTML="page.html"></div> function getInclude() { var x = document.getElementById("import").includeHTML; //returns 'undefined' alert(x); } function modInclude() { document.getElementById("import") ...

javascripthtml

What is the method to display the result in a text box upon clicking the submit button in PHP?

I am attempting to calculate the factorial of a number using PHP. Within my interface, there are two text boxes: one for inputting the number and another for displaying the result (the factorial value). Once I click on the submit button, I want the calcul ...

phphtmlfactorial

Opacity of background color only applies to the color

So, here's the scenario - I currently have a background that looks like this: background:url(../img/arrow_lch.png) right no-repeat #2e443a; The challenge I'm facing is how to decrease the opacity of only the background color (#2e443a). Any sugg ...

csscolorsopacity

Locate HTML attribute values with the help of BeautifulSoup

Trying to extract data from HTML using BeautifulSoup has proven to be more challenging than expected. Specifically, I am struggling with utilizing the .find() function correctly in this scenario. Take a look at the HTML snippet below: <div class="a ...

pythonhtmlcssbeautifulsoup

Showing the date object in a react component

As a new programmer, I decided to start with React hooks based on recommendations that it's easier to learn. However, I encountered an issue when trying to display the deliveryDate on the screen. React doesn't seem to accept objects as children, ...

javascripthtmlreactjstypescript