Positioning a sticky footer in a dual-column design

This updated post is a revised version of the one found at this link. I aim to provide a clearer explanation of my issue compared to the previous post. The problem revolves around the placement of the footer in two different scenarios.

Scenario 1:

The first scenario occurs when the body content does not fill the height of the browser, requiring the footer to be fixed at the bottom of the browser.

Scenario 2:

The second scenario arises when the body content exceeds the available height and overflows. In this case, the footer should not be fixed at the bottom but instead appear after the end of the content.

The initial solution and a link to the Fiddle example can be found in the aforementioned link from the previous post.

Additionally, while JavaScript could achieve this, I am seeking a solution using only CSS. Any suggestions?

htmlcss

Answer №1

If you're looking to improve your layout, consider using nested flexbox like in the example below:

Check out this jsFiddle for more details

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.container {
  flex: 1;
  display: flex;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="header">header</div>
<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">
    <div class="main">
      content<br>content<br>content<br>content<br>content<br>
      content<br>content<br>content<br>content<br>content<br>
      content<br>content<br>content<br>content<br>content<br>
      content<br>content<br>content<br>content<br>content<br>
     </div>
    <div class="footer">footer</div>
  </div>
</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

send data to a hyperlink

I need to pass a parameter to the href based on the first name in the list. The names are links to another page that I retrieve via an _id passed in the URL. The issue I am facing is that the id is not being passed to the URL, resulting in an error. How ...

javascripthtmlnode.jsexpress

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

javascripthtmlcss

What is the best way to have an image fill the remaining space within a 100vh container automatically?

I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...

htmlcss

Can Jquery be used to swap out specific li content?

<div class="widget_ex_attachments"> <ul> <li> <i class="fa fa-file-word-o"></i> <a href="uploads/2014/09/Parellel-universe.docx">Parellel universe</a> </li> ...

javascriptjqueryhtml

Problem with the transform attribute in CSS

Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...

htmlcss

Can you tell me the specific name of the HTML document style that features two columns?

Here are two websites that showcase a unique two-column style layout: http://momentjs.com/docs/ I find these sites visually appealing and I am curious about the specific name of this style. Is there a template or tool available to create documents with a ...

javascripthtmlunderscore.jsmomentjs

Is there a way I can appropriately display an image in a specific size box?

Check out the code snippet I wrote below: import React from 'react' function OurCourse() { return ( <div className='w-full '> <div className='w-full h-[390px]' style={{ backgroundImage:&apos ...

javascriptcssreactjstailwind-css

Generating a JavaScript variable linked to a Rails Active Record relationship

I'm trying to implement an active record association in the DOM, but I'm encountering some difficulties. Here is my editor class: .editing .row .col-sm-3 .col-sm-8 .text-left #font-20 .title-font . ...

javascriptjqueryhtmlruby-on-railsruby-on-rails-4

Unexpected problem with redrawing HTML application in Android WebView

I created a basic nixie clock app using HTML and wrapped it in a WebView for use on Android. It consists of one HTML file, a JS file, a CSS file, and ten digit images. After a few hours, I noticed stripes appearing in the center of the screen where the an ...

androidhtmlcsswebviewdrawable

How to link a sandbox file in HTML with an iPhone

Looking to create an HTML application specifically for the iPad, I am interested in developing a background process using Objective-C that will handle the downloading of images and data. The goal is to be able to access these resources from within an HTML ...

iphonehtmluiwebviewnsdata

Using Selenium's findElement method along with By.cssSelector to locate elements with multiple classes

I'm a beginner with selenium. Can someone explain how to locate an element that has multiple classes and values? <div class="md-tile-text--primary md-text">Getting Started</div> using the findElement method By .css Selector. ...

cssselenium-webdriver

Creating a user-friendly navigation menu: A step-by-step guide

I need help creating a navigation menu for my website that isn't functioning properly. Here is the code I am currently using: body{ margin: 0px; padding: 0px; } nav > ul{ margin: 0px; padding: 0px; } nav > ul > li{ fl ...

htmlcss

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

javascriptjqueryhtmlcss

Is there a way to deliver information to a specific element on a client's HTML page?

My current project involves using Node.js to serve a webpage that collects user inputs and stores them in a mongodb server. The web page also displays these user inputs. I am trying to determine the best way to pass the user inputs from node.js to the < ...

javascripthtmlnode.js

Set the div to have a position of absolute, disregarding any other parent divs that may also have position absolute set

Is there a way to bring an outsider class <div> to the front of all others, even when all <div> elements are set as position: absolute;? How can the .free-object, which is inside .left, overlap both .left and .right? I have tried using z-ind ...

css

the menu didn't glide into view

I'm currently working on implementing a stylish menu For this project, I am following a helpful guide that instructs to create the HTML in a single file. The issue is that the menu isn't sliding smoothly as expected. Here is the HTML code - no ...

jqueryhtmlcssmenu

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

javascriptjqueryhtmlcss