Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Trying to create a header, sticky footer, and content section with 100% height, but facing issues with the middle height. Below is the code and jsfiddles provided. Using HTML 4.0 strict in IE7 without the option to change.

jsfiddle without 100% height: http://jsfiddle.net/hWRnZ/

jsfiddle with 100% height: http://jsfiddle.net/hWRnZ/1/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head runat="server">
    <title>DenApp</title>
    <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
    <link rel="Stylesheet" href="./css/master.css" />
</head>
<body>
    ...

CSS

/*Main Styles*/
html, body {margin:0px;padding:0px;height:100%;width:100%;}
#master_bodywrapper_div {margin:0px;padding:0px;height:100%;}
...
csshtmlheightstrict

Answer №1

To achieve a fixed header and footer layout, assign fixed positions to both elements and then set top and bottom margins for the main div equal to the heights of the header and footer respectively.

    /*Main Styles*/
html, body
{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}


/*Header Styles*/
#master_header_div
{
    background-color:Purple;
    height:72px;
    display:block;
    width:100%;
    top:0px;
}
#master_main_div
{
    overflow:hidden;
    background-color:Red;
    width:100%;
    margin-top:72px;
    margin-bottom:20px;
    display:block;
    height:100%;
}

/*Footer Styles*/
#master_footer_div
{
    background-color:Purple;
    height:20px;
    position:fixed;
    bottom: 0;
    display:block;
    width:100%;
}

You can view the code in action on this fiddle: fiddle

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

Using Jquery to create a slideshow with a div that is set to absolute

<!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); ...

jqueryhtmlcss

Unslider: Ensure images stay centered even on smaller screen resolutions

Utilizing Unslider in a recent project from . Managed to align the slider halfway, but facing an issue with off-center slides on resolutions of 1920px and lower. The image width is 3940px. Attempted to implement the code snippet from this answer like so: ...

javascriptjqueryhtmlcssunslider

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...

javascripthtmlreactjsgoogle-maps-api-3

Having trouble with innerHTML.value functionality?

Recently, I've been delving into creating a JavaScript program that fetches Wikipedia search results. Initially, everything seemed to be working fine as I was able to display the searched item using the alert() method. However, for some reason, it now ...

javascriptjqueryhtmlajax

the buttonclick won't pause the timer

I'm having trouble with the timer function when a button is clicked. The startpause() method sets the start and stop timers, but when I click the button rapidly multiple times, the timer starts to jump by 2-3 seconds. It seems like more than one timer ...

javascripthtml

Locate the data attribute and store it in the database using an ajax request

I am in need of a proper script to insert a data attribute into the database upon clicking using ajax. HTML: <li><a data-cat="random name">Button</a></li> jQuery: $('li a').click(function() { $(this).data('cat&a ...

phpjqueryhtmlajax

What is the best way to modify a date and time within an <td><input> element using jQuery?

I am looking to automate the updating of the datetime in a <td> tag, but I am struggling with implementing jQuery within tables. I also plan on resetting to the default datetime value if the checkbox is unchecked, although I will attempt to tackle t ...

htmljqueryhtml-table

What is the best way to align the last two items at the bottom of the screen?

Incorporating kendo controls and aiming to align the split button and button at the bottom of the div, I'm encountering difficulties achieving this. How can I eliminate the top gap? Even with attempts like setting margin-top and padding-top as 0, the ...

jqueryhtmlcsskendo-ui

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

I am aware of the easier CSS options for my question, but I am determined to learn JS (Jquery), so please bear with me. My plan: Menu-items are connected to articles within my content division. Initially, only the first article (#intro) is displayed. All ...

javascriptjquerycsshtml

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascriptjquerycsshtml

Obtain the real-time inventory quantity of the specific product variation in WooCommerce

When a WooCommerce product variation's stock quantity is 0 or less and backorders are allowed, I want to offer customers the option to pre-order the item on the product page. To clearly indicate this to customers, the "Add to Cart" button should chan ...

javascriptphphtmlwordpresswoocommerce

Guide to adding a Json file in a PHP file with PHP

I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...

javascriptphphtmljson

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

Curved Edges Ensure Non-Interactive Elements

element, there is a query about utilizing a color wheel from a repository on GitHub. The goal is to disable any actions when clicking outside of the canvas border radius in this color wheel. Various steps need to be taken to prevent unwanted outcomes: - S ...

javascriptjqueryhtmlcss

Design a dynamic div element for banners that adjusts to different screen

Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted? For example, if you look at the slider on this website "", yo ...

jqueryhtmlcsstwitter-bootstrapresponsive

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

javascripthtmlangularjsionic-frameworkhtml5-canvas

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

htmlcss

Customize your CSS line height for the bottom of text only

Hey there, I'm pretty new to frontend development so please excuse me if this is a silly question :) I know that it's not usually done, but when you apply line-height to an element like an h1, it adds extra space both on the top and bottom of th ...

htmlcss

What steps should I take to ensure that this website is responsive across all screen sizes?

Struggling with adapting to different screen sizes, especially with Bootstrap. Below are the images for reference: https://i.stack.imgur.com/AlCjA.png https://i.stack.imgur.com/FT2mU.png Sass source code snippet: body background: $main-background ...

htmlcsssass