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

CSS with three columns: the middle column has a fixed size, while the right and left columns

I am attempting to create a 3 column layout with specific requirements: The middle column is fixed at a width of 660px The left and right columns should each take up half of the remaining space, but have a minimum width of 120px The middle div need ...

htmlcss

Proper Method for Constructing Forms

While developing a signup form, I've noticed that I often turn to using tables for proper alignment, similar to the approach used on the MySpace signup page where colspan is utilized to evenly space out elements. Is this method going against conventio ...

htmlcssformscss-tables

The result of calling addEventListener is undefined

My issue lies with the addEventListener function, as it is not working correctly. I've created a function that requires an event listener to track scrolling and then execute a callback function. window.addEventListener("scroll", checkPosition); Unf ...

javascripthtmldom

How to make the slides in a Bootstrap 4 carousel slide in and out with animation

I'm currently utilizing the bootstrap 4 carousel and have made some customizations to fit my project needs. The main requirement is: When I click on the next slide, the current next slide should become active and a new next slide should load with ...

javascripthtmljquerycssbootstrap-4

Locate and substitute `?php` and `?` in a given string

I am facing a challenge with inserting a large string of valid HTML code into the DOM, as the string also includes PHP code. When Chrome renders the code, it automatically comments out the PHP sections. The PHP code is encapsulated in <?php ... ?>, s ...

javascriptjqueryhtml

A critical issue occurred: array length is invalid. The attempt to include EJS in the template failed due to

Currently, I am attempting to loop through my JSON data using EJS from Node/Express. However, I need to insert a different pin into the flexbox when it reaches the 6th iteration. Whenever I try to implement this logic, I encounter a severe error that disr ...

javascripthtmlnode.jsexpressejs

Utilizing Nginx with Angular2 for a seamless PathLocationStrategy implementation in html5

Angular2 is a single-page site, so all URL requests need to be redirected to index.html using Nginx. Below is the Nginx server block configuration: server { listen 8901; server_name my_server_ip; root /projects/my_site/dist; location /.+& ...

htmlnginxangularnavigation

Experiencing excessive CPU usage while utilizing a progress bar in Angular

Whenever I try to load a page with 2 progress bars, my CPU usage goes through the roof... I decided to investigate and found that once I removed them, the site's speed improved significantly. Here's a code snippet of one of the progress bars: ...

javascripthtmlcssangularjstwitter-bootstrap

Step by step guide to creating individual counter sections

I have set up a counter section where the numbers go from 0 to a specific value. However, currently all three counters start counting simultaneously. Is there a way for the first counter to count up first, then once it's done, move on to the second c ...

javascripthtmlcssbootstrap-4bootstrap-5

Is there a way to use JavaScript to switch the entire div on and off

I have a function called done that I want to use to toggle the visibility of my "temp" division. tasks.innerHTML += `<div id="temp"> <span id="taskname"> ${input.value} </span> <button class="d ...

javascripthtmlfunctiontoggleinnerhtml

Json data integrated dropdown menu

I have successfully retrieved data from a Json array and displayed it in a dropdown list. However, I am facing an issue where I want to only show the name of the city instead of both the name and description. If I remove cities[i]['description'], ...

javascripthtmljson

Struggling to input information from a web form into a MySQL database using PHP

I'm currently facing an issue with my form not being able to submit data to the MySQL database. Strangely, I'm not receiving any error messages that could help me identify the root of the problem. I experimented by changing the action method to G ...

phphtmlmysqlwamp

Looking to turn off animation for a WordPress theme element?

Is there a code that I can insert into the style.css file to deactivate the theme animations on my WordPress page? As users scroll down, each element either drops in or slides in. I recently purchased the WP Alchemy theme from , but the animation speed is ...

htmlcsswordpress

Maintain the central alignment of the entire page (including the horizontal scrollbar) while zooming in

I have successfully centered elements, but now I am trying to center the entire page (i.e. have the horizontal scrollbar in the middle) when zooming in. Currently, the scrollbar stays at the very left end as I zoom in. * { margin: 0; padding: 0; box ...

css

Creating a contact form in WordPress that triggers a separate PHP file

I've been working on integrating a small contact form into the sidebar of my WordPress site. After moving the code from its original HTML file to the appropriate WordPress PHP files, everything seems to be functioning correctly except for the contact ...

phphtmlwordpressforms

The functionality of Jquery datatables seems to be faulty when navigating to the second page

While utilizing the jQuery datatables plugin, I encountered an issue where the event click function only worked on the first page and not on subsequent pages. To address this problem, I discovered a helpful resource at https://datatables.net/faqs/ Q. My ...

javascriptjqueryhtmlcssdatatable

Utilizing Paragraph Styles Within a CSS Stylesheet

I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...

cssxhtmlstylesheet

comparing values in an array with jquery

I am attempting to retrieve the phone number and mobile number from an array using jquery. jQuery: var data = $('#PhoneLabel').text(); var array = data.split(', '); $.grep(array, function (item, index) { if (item.charAt(0) === &ap ...

javascriptjqueryhtml

The ModalPopupExtender has the ability to automatically close

I implemented a ModalPopupExtender to display a panel with a textbox inside. I added some code for the textbox's textchanged event, but every time the focus leaves the textbox, the popup closes automatically. Can anyone suggest a solution to this prob ...

c#jqueryhtmlasp.netajax

Confusing Vaadin Component Styling Dilemma

I've been struggling to access the individual parts of elements that require navigating through the shadow DOM. I've been following a guide for assistance: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes When I add this code ...

javacssvaadinstyling