A webpage featuring a 2-column layout with a footer, along with a right column that is absolutely positioned and

Question

A webpage featuring a 2-column layout with a footer, along with a right column that is absolutely positioned and

I'm currently working on a basic two-column layout:

<div class = "parent">
   <div class = "left-column">
   </div>
   <div class = "right-column">
   </div>
</div>
<div class = "footer"></div>

The content in each column is dynamic, so it's impossible to predict the height of either column beforehand. However, there's a specific requirement that the RIGHT column must have a background color that always extends to the bottom of the page, regardless of its height compared to the left column.

To achieve this, I set the "parent" position:relative, and applied the following styles to the "right-column":

.right-column {
   position:absolute; 
   height: 100%; 
   right: 0px; 
   background-color: blue;
}

For the full code and implementation, you can view the JSFiddle link here: http://jsfiddle.net/gsmbzaz9/1/

However, there are several issues with this approach.

Firstly, setting height: 100% on the <body> or <html> means it will be based on the screen height, not the overall page height. As a result, positioning elements like the footer using bottom: 0 will apply to the screen bottom, rather than the entire page.

Secondly, if the right column is taller than the left one, the overflowing content spills out of the parent div, causing the blue background to get clipped.

The desired layout I'm aiming for is as follows:

+------+-------+
|      |       |
| LEFT | RIGHT |
|      |       |
+------+       |
       |       |
       |       |
+--------------+
|    FOOTER    |
+--------------+

In cases where the LEFT column is taller than the RIGHT, the blue background behind RIGHT should still extend properly, even if the content overflows into the footer area.

This layout setup seems to be quite common, but achieving it has proven tricky. While searching online for solutions regarding footer positioning, most techniques do not address the complications introduced by absolutely positioned columns outside the document flow.

Therefore, I'm seeking CSS techniques to accomplish this particular layout while considering the following requirements:

The exact heights of the columns cannot be predetermined due to dynamic content
The RIGHT column must consistently display a background color that extends to the footer
The footer needs to remain anchored at the bottom of the page (not just the screen) and become visible only when scrolling down completely to the end of the content (or when there are no scrollbars due to small content)

html css

Answer 1

Answer №1

Let's explore one approach to achieve this, focusing on the key properties utilized:

box-sizing:border-box -------- padding ----- display:table-cell ----position:relative for footer --

Initial Code Snippet with Minimal Content

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

<div id="cont">
  <div class="left-column">
    <div>
      <h1>Content</h1>
    </div>
  </div>
  <div class="right-column">
  </div>
</div>
<div class="footer"></div>

Modified Snippet with Abundant Content and Scrollbars Included

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

<div id="cont">
  <div class="left-column">
    <div>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
    </div>
  </div>
  <div class="right-column">
  </div>
</div>
<div class="footer"></div>

Answer 2

Let's explore one approach to achieve this, focusing on the key properties utilized:

box-sizing:border-box -------- padding ----- display:table-cell ----position:relative for footer --

Initial Code Snippet with Minimal Content

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

<div id="cont">
  <div class="left-column">
    <div>
      <h1>Content</h1>
    </div>
  </div>
  <div class="right-column">
  </div>
</div>
<div class="footer"></div>

Modified Snippet with Abundant Content and Scrollbars Included

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

<div id="cont">
  <div class="left-column">
    <div>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
    </div>
  </div>
  <div class="right-column">
  </div>
</div>
<div class="footer"></div>

Answer 3

Answer №2

Check out this fiddle here

I decided to incorporate a bit of JavaScript for the solution.

Now, according to your specifications, the 2 columns are perfectly aligned with the footer consistently positioned at the bottom of the divs (not the window), and the right column always extends to the full height up to the footer.

Hopefully, this provides some assistance

Here is a snippet of the code....

function adjustHeight() {
  leftHeight = $(".left-column").outerHeight();
  rightHeight = $(".right-column").outerHeight();
  if (leftHeight >= rightHeight) {
    $(".right-column").outerHeight(leftHeight);
  }
}

adjustHeight()

$(window).on('resize', function() {
  adjustHeight()
})

$(window).on('load', function() {
  adjustHeight()
})

h1 {
  padding: 20px;
}
.left-column {
  float: left;
  background: red
}
.right-column {
  float: right;
  background: blue;
}
.clearfix {
  clear: both;
}
.footer {
  background: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <div class="parent">
    <div class="left-column">
      <h1>Content</h1>

      <br/>
      <h1>Content</h1>

      <br/>
      <h1>Content</h1>

      <br/>
    </div>
    <div class="right-column">
      <h1>right</h1>
      <br/>
      <!-- remove these to see the height adjust -->
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <!-- remove these to see the height adjust -->
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="footer">
    <h1>FOOTER</h1>

  </div>

Answer 4

Check out this fiddle here

I decided to incorporate a bit of JavaScript for the solution.

Now, according to your specifications, the 2 columns are perfectly aligned with the footer consistently positioned at the bottom of the divs (not the window), and the right column always extends to the full height up to the footer.

Hopefully, this provides some assistance

Here is a snippet of the code....

function adjustHeight() {
  leftHeight = $(".left-column").outerHeight();
  rightHeight = $(".right-column").outerHeight();
  if (leftHeight >= rightHeight) {
    $(".right-column").outerHeight(leftHeight);
  }
}

adjustHeight()

$(window).on('resize', function() {
  adjustHeight()
})

$(window).on('load', function() {
  adjustHeight()
})

h1 {
  padding: 20px;
}
.left-column {
  float: left;
  background: red
}
.right-column {
  float: right;
  background: blue;
}
.clearfix {
  clear: both;
}
.footer {
  background: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <div class="parent">
    <div class="left-column">
      <h1>Content</h1>

      <br/>
      <h1>Content</h1>

      <br/>
      <h1>Content</h1>

      <br/>
    </div>
    <div class="right-column">
      <h1>right</h1>
      <br/>
      <!-- remove these to see the height adjust -->
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <h1>right</h1>
      <br/>
      <!-- remove these to see the height adjust -->
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="footer">
    <h1>FOOTER</h1>

  </div>

Answer 5

Answer №3

Utilizing jquery, this solution addresses various requirements. A link to the solution can be found here. The key specifications taken into consideration are as follows:

- Ensuring the right column extends to the bottom of the scrollable page, regardless of content length compared to the left column.

- Avoiding the use of absolute positioning.

- Placing the footer at the bottom of the page.

- Setting a minimum height for the right column so it reaches the bottom of the window.

CSS:

h1 {
    padding: 20px;
}
.left-column {
    width: 50%;
    display:inline-block;
    /* background-color: blue; */
}
.right-column {
    width: 50%;
    min-height: 100%;
    display:inline-block;
    float: right;
    background-color: lightblue;
}
.footer {
    text-align: center;
    width: 100%;
    display:inline-block;
    /* background-color: yellow; */
}

Jquery:

var leftHeight = $('.left-column').height();
var rightHeight = $('.right-column').height();
var windowHeight = $(window).innerHeight();
var footerHeight = $('.footer').height();

console.log(leftHeight, rightHeight, windowHeight);

if(leftHeight > windowHeight && leftHeight > rightHeight) {
    $('.right-column').height(leftHeight);
}
if(windowHeight > leftHeight && windowHeight > rightHeight) {
    $('.right-column').height(windowHeight - footerHeight);
}

Answer 6

Utilizing jquery, this solution addresses various requirements. A link to the solution can be found here. The key specifications taken into consideration are as follows:

- Ensuring the right column extends to the bottom of the scrollable page, regardless of content length compared to the left column.

- Avoiding the use of absolute positioning.

- Placing the footer at the bottom of the page.

- Setting a minimum height for the right column so it reaches the bottom of the window.

CSS:

h1 {
    padding: 20px;
}
.left-column {
    width: 50%;
    display:inline-block;
    /* background-color: blue; */
}
.right-column {
    width: 50%;
    min-height: 100%;
    display:inline-block;
    float: right;
    background-color: lightblue;
}
.footer {
    text-align: center;
    width: 100%;
    display:inline-block;
    /* background-color: yellow; */
}

Jquery:

var leftHeight = $('.left-column').height();
var rightHeight = $('.right-column').height();
var windowHeight = $(window).innerHeight();
var footerHeight = $('.footer').height();

console.log(leftHeight, rightHeight, windowHeight);

if(leftHeight > windowHeight && leftHeight > rightHeight) {
    $('.right-column').height(leftHeight);
}
if(windowHeight > leftHeight && windowHeight > rightHeight) {
    $('.right-column').height(windowHeight - footerHeight);
}

A webpage featuring a 2-column layout with a footer, along with a right column that is absolutely positioned and

Answer №1

Initial Code Snippet with Minimal Content

Modified Snippet with Abundant Content and Scrollbars Included

Answer №2

Answer №3

Similar questions

What is the best way to showcase a photo selected using an HTML input within a div container?

"Interactive table feature allowing for scrolling, with anchored headers and columns, as well as the option to fix

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

"Troubleshooting a Animation Problem in the Latest Version of

Exploring the ways to access inner contents of a Div element using ajax

Ensuring that the text-box is the same size as the image

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is it possible to preview and print a markdown file as a PDF in VS Code using a custom CSS stylesheet?

Tips for incorporating additional filter criteria into a jquery script

Preventing further onClick events from occurring ensures that any new onClick events will not be triggered as well. To achieve

Creating an effect where an image gradually enlarges from its midpoint

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Tips for utilizing CSS flexbox to create a row of squares that can scale while maintaining their aspect ratios

What's the significance of this issue? Fatal error: Inability to utilize function return value in write context

Trigger the running of a python script by clicking a button

Encountering an error of "undefined is not iterable, cannot read property Symbol(Symbol.iterator)"

Revamp the UI Framework's CSS to accommodate the latest Web Components

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Tips for creating space between a label and radio button in Bootstrap 4