Fixed css footer with full height content container

For my website's sticky footer, I followed this technique:

I wanted to add a border around the entire site that also encompasses the footer, but ran into an issue where it did not extend around the page properly. Here is what happened: https://i.sstatic.net/vmwTT.jpg

You'll notice in the image that the white box does not move down to the footer section.

To illustrate the problem, here is a jsfiddle link: http://jsfiddle.net/hc3Xu/14/

I previously asked a similar question without realizing it was related to the footer. The response mentioned that the issue might be caused by setting height: auto !important; in the container class, which prevented the content container from stretching to 100%. However, removing this causes another issue where the footer no longer sticks to the bottom of the page. I am currently stuck and unsure how to proceed.

csssticky-footer

Answer №1

Rather than:

.container {min-height:100%; height: auto !important; height:100%;
           margin: 0 auto -30px; width:980px;
           background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}

Consider trying:

.container {min-height:100%; height: auto !important; 
           margin: 0 auto -30px; width:980px; 
           box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
           -webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
           -moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}

You will also need to adjust the left and top margins of the footer to align it with your contentContainer div.

http://jsfiddle.net/z5geM/

Answer №2

http://example.com/code

I customized the elements slightly to incorporate a background image on the html element and centered the main content area within the body. By adjusting the border and box-sizing properties, I achieved a stylish grey border effect while maintaining 100% height. A small tweak in positioning the footer downward by about 20 pixels ensures it aligns perfectly within the body's grey border.

If you require a more detailed explanation of why this technique works, feel free to reach out!

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

clicking on links to different sections of the page does not automatically bring you to the top of

I am working on a design similar to this: http://jsfiddle.net/MTWu5/ The layout consists of a centered page with a sticky header. The header contains menu links that lead to anchors within the page. My issue arises when clicking on these links - I would l ...

htmlcss

Guide on building a personalized button layout in Bootstrap 4

I have been working on a React component that I want to stick to the bottom of the screen no matter what content is above it. Even if there is minimal content, I want it to remain at the bottom. To achieve this, I added style={{position: 'fixed' ...

htmlcssreactjsbootstrap-4material-ui

Adding DIV classes and IDs to my stylesheet

This is the code that I added to my Stylesheet: .friend { border:4px dashed 008000; } .enemy { border:2px dashed 008000; } .family { border:2px dashed 008000; } #archnemesis { border:4px solid 008000; } * { border:4px ...

htmlcss

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

htmlcssflexbox

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

cssangularjs

CSS problem with padding and width

Currently, I'm working on a conditional rendering issue where I want to give a div full width but due to padding applied to its parent, it's not expanding to the container's full width. Here is the snippet of the code: import Image from &qu ...

cssreactjsnext.jstailwind-css

Creating a background color without using the <canvas id> element can be achieved by utilizing CSS properties such as

As a novice in the world of HTML and CSS, I find myself working on creating my website using HTML. Upon inspecting my site, I notice that the default background color is white. Despite trying to change it by using #canvas { background-color: black; } in ...

htmlcssbackground-color

Using Javascript, you can create a function that can disable or enable a text link based on

Here is the code snippet showcasing CSS styles and HTML elements: CSS: .enableLink{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#069; padding-right:20px; text-decoration:underline; cursor:pointer; } .disableLink{ display:none; fon ...

javascriptjqueryhtmlcssajax

Having trouble using CSS to darken a background image in React?

My website (React.js) is giving me trouble with darkening the background image. I have attempted to darken the background image without success, even after trying the solution found here. I am utilizing the latest version of the Google Chrome browser for ...

cssreactjs

Encircling the most recently selected image with a border

I have successfully made some <img> elements act like <input type="radio"> buttons and now I want to visually indicate the user's selection by adding a border around the chosen image. My challenge is that there are multiple rows of images ...

javascriptjqueryhtmlcss

Modifying webpage design using JavaScript for styling

Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app? ...

javajavascriptcss

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

javascripthtmlcss

What is the best way to make the Nav bar overlap instead of shifting content to the right?

Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link <div id="mySidebar" class="sidebar" ...

javascripthtmlcssbootstrap-4nav

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

I am looking to customize the font size of \section and \subsection in doxygen's html output. Additionally, I want to include numbering for the sections and sub(sub)sections in the format: 1 Section1 1.1 Subsection1.1 1.1.1 Subsubsection ...

cssformattingdoxygen

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...

javascripthtmljquerycssbootstrap-4

The dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova

Guide to positioning elements in CSS

I'm struggling to get all the elements to align in a single row. I've tried using display: inline-block, but it's not working as expected. I'm working with DataTables and I want the button images to be aligned with the page number box. ...

htmlcssdatatables

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

I have an array of items, each containing a background property with a URL to an image. Here is my array: https://i.sstatic.net/jfrV0.png Here is the HTML structure: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol ...

javascriptjqueryhtmlcsstwitter-bootstrap

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

javascripthtmlcss