Tips for automatically adjusting the height of the footer

Is there a way to dynamically adjust the height of the footer based on the content length inside the body?

I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is not what I want. Ideally, I would like the footer to appear when the user reaches the bottom of the page and automatically adjust its height as the height of the main_content changes dynamically. The main_content's height property is set to auto. How can I achieve this?

To see how it currently appears, click here: http://jsfiddle.net/cherry12345/t62b2qb6/

Here's the code:

HTML

<body>
    <div  id="main_content">
        <p>Some text</p>
       
       ....(content truncated for brevity)...
        
        <p>Some text</p>
    </div>
    <div id="footer">
        &copy; 2014-2015 example.com. All Rights Reserved.
    </div>
</body>

CSS

#main_content {
    width: auto;
    height:auto;
    position:absolute;
    top:110px;
    left:400px;
    background: #FFF;
    border:1px solid lightgray;
}   
#footer{
    position:absolute;
    bottom:0px;
    width:100%;
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}
htmlcss

Answer №1

To get the desired layout, you can adjust the positioning like this:

#main_content {
    background: #FFF;
    border:1px solid lightgray;
}
#main_content > p {
    margin-left: 440px;
}
#main_content > p:first-child {
    margin-top: 110px;
}
#footer {
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

<div id="main_content">
    <p>Some text</p>
    ...
    <p>Some text</p>
    <div id="footer">&copy; 2014-2015 mysite.com. All Rights Reserved.</div>
</div>

http://jsfiddle.net/t62b2qb6/3/

Answer №2

In my opinion, implementing the following code snippet could be beneficial:

#content_area {
    width:auto;
    background: #FFF;
    border:1px solid lightgray;
}   

#bottom_section{
    width:100%;
    background: #666;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

Fiddle

Answer №3

Here is an example of how you can define your HTML:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

Additionally, here is the CSS for styling (note that the footer is set to be absolute, and the wrapper is relative):

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

You can view a live example here.

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

Tips for maximizing page layout efficiency without compromising on element visibility

What is occurring https://i.stack.imgur.com/Agjw6.gif The use of .hide() and .fadeIn(200) is resulting in a jittery effect that I would like to avoid. Desired Outcome When the user hovers over the menu icon, the menu icon should vanish the text "Pr ...

javascriptjqueryhtmlcss

When using the HTML code <p></p>, the empty paragraph tag does not create a line break

We have a .NET application that saves messages in axml format. Our task is to convert these messages into html. After some research, I came across a 3rd party library called "HtmlFromXamlConverter" that does this job, but with one issue: when the axml cont ...

htmlcss

Tips for implementing text-overflow ellipsis in an HTML input box?

On my website, I have input fields where I've added the following CSS styling: .ellip { white-space: nowrap; width: 200px; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } H ...

htmlcssellipsis

Entering numbers using <input type="number"> does not restrict invalid inputs, while accessing "element.value" does not give me the ability to make corrections

According to the MDN documentation on the topic of <input type="number">: It is said that they have built-in validation to reject entries that are not numerical. But does this mean it will only reject non-numerical inputs when trying to ...

javascripthtmlvue.js

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

htmlcss

Floating CSS containers

Apologies for not including a picture. You can view the design I am trying to achieve here. I am attempting to create two boxes with a third box below them, and another box on the right side of the layout. All enclosed within a larger container. Everythin ...

htmlcss-floatcss

Observing changes in the dimensions of flex children using MutationObserver

Considering the following structure of the Document Object Model... <div id="outer-container"> <div class="side-panel"><div width="200px"/></div> <div id="content"><!-- some content --></div> <div class=" ...

htmlcssflexboxmutation-observers

The functionality of my contact form is non-operational

I have been struggling with my contact form for months, trying various tutorials but still no luck. Please take a look at it here. This time, I followed this tutorial. Here's the code I have on my form from the first link: Contact Form ...

phphtmlformscontactscontact-form

Adjust picture to fit in div and align vertically

JSFiddle In my fluid layout, I have a div with a required aspect ratio of 1:1. This div can contain text, an image, or both. The challenge is to vertically align the text and ensure the image fits within the div without exceeding its boundaries or losing ...

css

Is there a way to make my modal appear only when the "New" option is clicked?

Is there a way to make my modal in VueJS open only when I click on the "New" option? <select v-model="input.des" @change="$refs.modalName.openModal()"> <option value="A">A</opt ...

javascripthtmlvue.js

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...

javascripthtmlcssfunctionweb

Using jQuery UI to create sortable lists that are connected and have hidden overflow features

How can I hide overflow from two fixed-height divs containing sortable lists connected to each other without affecting their connection? For example, if overflow is set to hidden, the list item doesn't display when dragged outside of the div. I' ...

javascriptjquerycssjquery-ui

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

javascripthtmlcssvue.js

When state updates in React, the component will rerender without affecting its style

There seems to be a minor oversight on my part. The issue arises in the parent component where I maintain a state of selected items, which are added from the child component. The background color of the child component changes when an item is selected. Ad ...

javascriptcssreactjsreact-hooks

Is Ursina the right choice for web development?

Looking for a method to compile Ursina for HTML5 using WebAssembly or another technology? I am seeking to make my Ursina Game compatible with Linux & Mac (and potentially Android/iOS with webview), but the current cross-platform compilation options for Py ...

pythonhtmlursina

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

I'm experiencing a rather intriguing and peculiar issue with css styles when zooming in and out on the browser. Specifically, I've created a material ui card where the background-color changes upon clicking with an animation effect. The animati ...

javascripthtmlcssreactjsmaterial-ui

Enhance HTML Performance with Resource Preloading

Just a quick query I wanted to throw out there - would prefetching resources like js scripts and images actually slow down the page load time? For instance, let's say I have a page with several links such as: <link rel="prefetch" href="http://exa ...

htmlalgorithmcross-browserhttprequestprefetch

The container is not adjusting to the screen size correctly and the flex-direction: row is not functioning as

Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me. No matter what I try, I can't seem to get this container to take up the whole screen width. Variou ...

htmlcssangularflexbox

Guide on triggering a function with the Enter key in Angular 9

A button on my Angular component currently triggers a method with a (click) event, but I also want the same method to be triggered if the user presses the enter key in the input box. This gives the user flexibility. Below is the HTML code for the input an ...

htmlangular

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 fi ...

htmlcss