How to have a common header and footer in a HTML CSS web app?

Question

I have been using ASP.NET MVC for all my projects and have been using @Html.Partial("_header") where ever I wanted to include a common static html in any of my pages.

But now I am working in a pure HTML CSS and JS web app. Here I am not using any server side technology, just a set of static contents.

Here in the site I have the following layout

----- HEADER -----

----- Changing Content ------

----- FOOTER ------

So, here is what I want, I want to somehow do the thing I used to achieve @Html.Partial()

One way I know is using IFRAMES, is there any other better way ?

Milind Anantwar · Accepted Answer · 2013-03-02T11:27:13.583

1

i have come across this situation while making chrome extension.

What i did was storing the header footer in variable of js file and then appending that to body using jquery.i was using that js file where i wanted my header and footer to be.i just used to add js in script of head.....Boom i got my fixed header footer in page.

WORKING DEMO

Code:

<!DOCTYPE html>
<html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">      </script>
 <script>
 function appendheaderfooter(){
 var header="<div style='position:fixed;top:0px;background-color:aqua;'>header html</div>";
 var footer="<div style='position:fixed;bottom:0px;background-color:aqua;'>footer html</div>"
 $("body").append(header+footer);
}
  window.onload = appendheaderfooter;
</script>
<style>
div{width:100%;}
</style>
</head>
<body><br/>
<p>Content goes here</p>
</body>
</html>

edited Mar 02 '13 at 11:27

answered Mar 02 '13 at 10:54

Milind Anantwar

81,290
25
94
125

so the page must be shifting right, just before the js is loaded ? – Yasser Shaikh Mar 02 '13 at 10:56
no...i wrote those html in such a way that they remained sticked to header and footer accordingly.so had no problem of any shifting. – Milind Anantwar Mar 02 '13 at 10:58
What happens when JavaScript is disabled? c.f. "Progressive Enhancement" / "Graceful Degradation" – kwah Mar 02 '13 at 11:02
@kwah:he is using pure html css and javascript....everything fails if javascript is disabled.to be honest i never came across the situation where javascripts are disabled on page. – Milind Anantwar Mar 02 '13 at 11:08
yea javascript will always be enabled in my case. Thanks milind, can you share some code, a sample/fiddle ? – Yasser Shaikh Mar 02 '13 at 11:12
gimme a minute...ill make bin for you. – Milind Anantwar Mar 02 '13 at 11:23

score 1 · Answer 2 · answered Mar 02 '13 at 11:28

If your web app is going to be hosted on a web server supporting Server Side Includes (for example Apache) you can just add  Depending on your web server, you might need to enable the SSI first (Options +Includes in .htaccess on apache)

score 0 · Answer 3 · edited May 23 '17 at 12:27

Frames

Frames used to be the way to go, but as time has gone by they have fallen out of favour with developers for one reason or another - note this article from 2006!

Fortunately, you seem to be in favour of avoiding frames :)

SSI over JavaScript

Secondly, Server-Side Includes (SSI) or some other server-based "include" is favoured over JavaScript, though I accept that this is not necessarily a "pure" HTML/JS/CSS solution.

The format of an SSI statement is as follows:


http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

There are many answers that reflect this view on SO - for example, the first three that appeared in searching are here, here and here ...

Note that the accepted answer for that last one is recommending a JS solution, but the final paragraph states a preference for something server-side..

Compilation of your HTML code (my preferred option)

It has been a while since I have needed to create a "pure" HTML/CSS/JS website, but when doing so my preference is to keep the code modular and "compile" the HTML before deployment.

Although it requires a little additional work prior to deployment, it produces the "purest" output to be used within deployed code. You write your code as normal, use a little magic to indicate what you want included and where and then you "compile" this code into bog-standard HTML/CSS/JS files that are deployed onto your site.

This brings the ease and simplicity of using templated header/footer/menu-bar/sidebar files, with the tradeoff of needing to compile the HTML code beforehand.

SASS uses Ruby on Rails to perform this compilation. Unfortunately, a reference for its HTML equivalent is escaping me at this particular moment in time, so I shall update my answer as/when I relocate it.

score -1 · Answer 4 · answered Mar 02 '13 at 11:18

-1

Are you open to use Frameset, though it is not supported in HTML5?

answered Mar 02 '13 at 11:18

Nilesh Thakkar

2,877
1
24
43

How to have a common header and footer in a HTML CSS web app?

4 Answers4

Frames

SSI over JavaScript

Compilation of your HTML code (my preferred option)