A dynamic 3-column design featuring a top header, fixed footer, and columns that stretch to full height

Question

A dynamic 3-column design featuring a top header, fixed footer, and columns that stretch to full height

Struggling to design a layout with specific features:

3 fluid columns
Columns that stretch to full height
A header
Sticky footer

Came across a related query on stackoverflow: CSS layout with header, footer and multiple 100% min-height content columns

The solution provided in the link involved using a table-based layout. However, I'm keen on avoiding tables to easily hide outer columns on smaller screens.

Shared the code created so far here:

The demo shows near success but the ideal layout changes aren't consistent upon resizing.

Currently tackling these resizing bugs:

Transitioning from a tall window to a short one prompts an unnecessary scrollbar.
Moving from a wide window to a narrow one causes middle column content to disappear under the footer.

Experimented with

$(window).height()

in place of

$(document).height()

but encountered new issues as a result.

Any assistance would be greatly valued!

jquery css responsive-design fluid-layout sticky-footer

Answer 1

Answer №1

If you're looking to tackle this issue, there are two potential solutions:

One option is to utilize the re-size jQuery function to re-run certain actions when the window is resized.

$(window).resize(function(){
     ////Insert your code here again
})

Alternatively, you could employ CSS properties to create a fixed-positioned DIV at the bottom of the page.

position:fixed; bottom:0; left:0; right:0; height:100px;

Answer 2

If you're looking to tackle this issue, there are two potential solutions:

One option is to utilize the re-size jQuery function to re-run certain actions when the window is resized.

$(window).resize(function(){
     ////Insert your code here again
})

Alternatively, you could employ CSS properties to create a fixed-positioned DIV at the bottom of the page.

position:fixed; bottom:0; left:0; right:0; height:100px;

Answer 3

Answer №2

Here is a suggestion for you to try:

HTML Code:

<div class="container">
    <header>
        The header
    </header>
    <div class="box green">
        Column 1
    </div>
    <div class="box blue">
        Column 2
    </div>
    <div class="box yellow">
        Column 3
    </div>
    <footer>
        Sticky footer
    </footer>
</div>

CSS Styles:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
    height: 100%;
}

header {
    background-color: orange;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.box {
    width: calc(100%/3);
    min-height: 100%;
    display: inline-block;
    float: left;
}

footer {
    position: absolute;
    bottom: 0;
}

Check out the live demo on JsFiddle.

Answer 4

Here is a suggestion for you to try:

HTML Code:

<div class="container">
    <header>
        The header
    </header>
    <div class="box green">
        Column 1
    </div>
    <div class="box blue">
        Column 2
    </div>
    <div class="box yellow">
        Column 3
    </div>
    <footer>
        Sticky footer
    </footer>
</div>

CSS Styles:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
    height: 100%;
}

header {
    background-color: orange;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.box {
    width: calc(100%/3);
    min-height: 100%;
    display: inline-block;
    float: left;
}

footer {
    position: absolute;
    bottom: 0;
}

Check out the live demo on JsFiddle.

Answer 5

Answer №3

After some investigation, I finally came to a solution. It turned out that clearing all the forced column heights before recalculating them upon window resizing was the key.

If you're interested, here's a post detailing my approach:

Appreciate the assistance!

Answer 6

After some investigation, I finally came to a solution. It turned out that clearing all the forced column heights before recalculating them upon window resizing was the key.

If you're interested, here's a post detailing my approach:

Appreciate the assistance!

A dynamic 3-column design featuring a top header, fixed footer, and columns that stretch to full height

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble getting the auto complete feature to work in AngularJS with jQuery

Session values do not persist in Window Popups

Differences in background size percentage can be observed between Firefox and Webkit browsers

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window

Posting ajax is causing the URL to exceed its character limit

I'm looking to design a button with text positioned beneath an icon using either Bootstrap 5 or CSS. How

receiving ajax server updates

"Troubleshooting the lack of background image display in Next.js when using

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

Is there a way to align the Login and Register buttons next to each other? I specifically want the Register button to redirect to the register.php page using HTML/CSS

Fixing the body tag's margin-top property in Yii2

Tips for managing event listeners with JavaScript validation and PHP

JavaScript to adjust the size of a div

Unable to trigger the (click) event when adding new data in ANGULAR 4

Converting from Jquery to pure JavaScript and the process through which the interpreter searches the DOM for elements

What is the best way to assign attributes to all items in an array, excluding the currently selected one?

Preventing a webpage from responding to events by utilizing either CSS or jQuery

Switching between React components based on a click event

What could be causing my scrollable div to not function properly within a Bootstrap modal?

tips for concealing bootstrap css hover/activate color when scrolling beyond the top