Main wrapper with CSS sticky footer and top margin

Currently, I am using the sticky footer code from http://ryanfait.com/sticky-footer/ and it works perfectly except for when I need to add margin or padding at the top of the page. The design I am working with includes a patterned body with all the content inside a white box that starts 15px from the top. Despite this, I still require a footer that remains fixed at the bottom across all browsers. Any suggestions?

UPDATE:

After exploring various ideas, none seem to work flawlessly. When adding a margin to a subelement of the wrapper, an unnecessary scrollbar is introduced. Here is a working example: http://jsfiddle.net/cronoklee/p2cPD/

htmlcss

Answer №1

If you are willing to start fresh and ditch the sticky footer you have been using, here is my approach to creating one from scratch.

HTML

<div class="wrapper">
    <div class="content">
        ... Your Content Goes Here ...
    </div>
</div>
<div class="footer">
    ... Your Footer Goes Here ...
</div>

CSS

.wrapper {
    background: #eee;
    padding: 15px 0 100px;
}

.content {
    background: #fff;
}

.footer {
    background: #ccc;
    bottom: 0;
    height: 100px;
    left: 0;
    position: fixed;
    right: 0;
}

This should function smoothly across different browsers. The only caveat to remember is that position: fixed is not supported in IE 6. Feel free to suggest any enhancements :)

Answer №2

Is it possible to add a margin-top to the body element?

body{
margin-top:15px;
}

I tested this using firebug on the specified page.

Answer №3

Here's a fix that doesn't require a scrollbar. Follow these steps:

.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}

.download{
top:175px;
}

Answer №4

Recently, I encountered the same issue with an unnecessary scrollbar caused by a vertically-down-shifted footer due to my header-div's margin-top: 20px. In my search for a solution, I discovered that by simply changing the .content{margin-top:15px;} to .content{padding-top:15px;}, the problem was resolved. The scrollbar disappeared and the content was correctly positioned from the top.

You can view the solution here: http://jsfiddle.net/p2cPD/24/

Although this may expand the content-div's background, you can easily address this by using a transparent PNG or alternative method.

Additionally, as per , the 

<div class="push"></div>
should be placed at the end within the wrapper-div and after the content-div, not inside the content-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

Adjust the select box size to be in line with the text box dimensions

I'm struggling to understand why there are two boxes visible in my navigation bar. For example, when looking at the Home link, I notice that there are actually two boxes; one containing the text "Home" and another one that extends outwards to the rig ...

htmlcss

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...

htmlcssangularcss-selectorspseudo-element

What is the best way to trigger a javascript modal to open automatically after a specific duration

Let's take an instance where my modal has the ID #modal1. It usually appears through a button-based action. ...

javascripthtmltwitter-bootstrapbootstrap-modal

What is the procedure to reduce my final search result by 1?

When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition. <ul id="list2"> <li class="in2"> An extra number is added ...

javascripthtmljquerycssajax

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 ...

cssvue.jssvggridsome

Creating a Personalized Dropdown Menu Within the <div> Tag

My current task involves obtaining an element in the following format: https://i.sstatic.net/uhHkL.png Inside the nav-item, there is a dropdown with a top-centered triangle on it, and the dropdown is positioned at the center. Below is what I have achiev ...

htmlcssdrop-down-menubootstrap-4

Tips for avoiding accidental unit conversion in jQuery

Imagine having the following code: var $element = $('<div/>'); $element.css("margin-left", "2cm"); console.log($element.css("margin-left")); When tested in Chrome, it doesn't return anything, but Firefox shows "75.5833px". Any sugges ...

javascriptjquerycsscross-browserunit-conversion

What is the method to define the maximum width for a BootstrapTable while also trimming any data that exceeds this specified width?

In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows: <table class="display table table-bordered table-striped w-100 tables" ...

cssasp.netbootstrap-5bootstrap-table

The header is displaying with the heading and image out of alignment

Take a look at my code header img{ width:10%; vertical-align: middle; } header h1{ text-align: right; display:inline; position: absolute; } header { width : 100%; height: 1% ; background: red; } <!DOCTYPE html> <html> <head> <m ...

htmlcsstwitter-bootstrap

After the video finishes playing, a black screen is displayed on the HTML 5 video

I'm facing an issue with a video loaded in the <video> tag. The video is set to play only once and doesn't loop. However, after the video finishes playing, it just displays a black screen. I've attempted to use the poster attribute, ...

htmlhtml5-video

Using Jquery to transfer text from a form to a DIV and ensuring the final character is verified

Users can input their name on my HTML form, which will then be displayed in a DIV as part of a book title. The book title includes apostrophes (e.g. Amy's Holiday Album). However, if the user's name ends with an S, I do not want the apostrophe ...

javascriptjqueryhtmlcssforms

Loop through each JSON object and insert it into an HTML element

I am working on looping through a JSON object and converting it into HTML. While I can iterate through all the objects in the JSON, I am having trouble extracting just the first object. var res = '[{"ID":"246","mobile":"samsung","feedback":"feedback ...

javascriptjqueryhtmljson

Which Web Browsers Support Canvas and HTML5?

Currently working on a project that involves using the HTML5 Canvas element. I am curious about which major browsers (including specific versions) actually support the Canvas tag. I am not interested in hearing about IE. In this tutorial Drawing shapes - M ...

javascripthtmlcanvascross-browser

Enhancing the display of large images on Google News for Android and iOS as a web developer

Despite having a specific XML file with articles designed for Google News and including images in the XML using the following format: <i:image> <i:loc>https://...</i:loc> <i:caption>Image description</i:caption> </i:ima ...

htmlmicrodataxml-sitemapgoogle-news

What is the method for configuring the asp-for input tag helper to create camelCase names?

My view model is structured as follows: public class MyModel{ public DateTime? StartDate {get;set;} } When using an input tag on a view with the asp-for tag helper, the default HTML generated looks like this: <input type="datetime" id="StartD ...

htmlasp.net-core-mvctag-helpers

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss

Save and showcase SQL, PHP, HTML, and JS code exactly as it is preserved in MYSQL database

Is there a way to store and display complete JS, PHP, and HTML code in MySQL without altering the format? The stored PHP code should appear as: <?php echo "something"; ?> And not just: something For JavaScript: <script> document.write(&ap ...

javascriptphphtmlmysqlsql

Tips for crafting interactive Dropdown menus

Visit this link for more information Hello all, I am a beginner in HTML and Javascript and seeking guidance on how to create dynamic dropdown menus similar to the ones on the provided website. I have successfully implemented the source code, but my questi ...

javascriptjqueryhtmlajax

``Please proceed with the form submission only if it has been verified and

Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...

phphtmlforms

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

When hovering over a card, all icons are displayed instead of just the icons for that specific card. I want to show only the icons for the card being hovered on (example output: image). The cards are generated automatically using v-for and fetching data fr ...

javascripthtmlcssvue.jssass