I have an example below that is designed to be printed off. I have a series of div elements which compose the body that I am expecting to render either completely one on page or move to the next page, so that no data is cut off. I have a static header and footer that must be on every page of the printoff. I have tried all sorts of different configurations to keep this logic intact while also including a header and footer that statically populate.
Note: It is an absolute requirement that the elements between the header and footer (the main body) are able to wrap onto the next page. There will be cases where there is too much data. I'm looking for a solution that will allow for a static header and footer, while the body wraps around / ignores them across multiple pages.
One method I'm currently exploring has been setting a fixed #page margin size. This results in the inside boxes behaving appropriately. My only issue is that I cannot get the header or footer to render outside of the given margin sizes, even when I set their position values to be negative. Here is my example code:
<html>
<head>
<style>
* {
margin: 12px;
padding: 12px;
width: 256px;
}
header {
border-style: solid;
position: absolute;
top: 0px;
height: 128px;
border-color: blue;
}
div {
border-style: solid;
height: 128px;
break-inside: avoid;
}
footer {
border-style: solid;
position: absolute;
bottom: 0px;
height: 128px;
border-color: red;
}
#page {
size: auto;
margin: 60mm 0 60mm 0;
bleed: 10cm;
}
</style>
</head>
<body>
<header> </header>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<footer> </footer>
</body>
</html>
This is how it's rendering, but I want the header and footer to be rendered at the top / bottom of the pages, while the inside elements keep their current logic.
I've tried wrapping the inside elements in a div and then applying margin attributes, but this causes them to lose the functionality of wrapping correctly across multiple pages, and instead bleeding / being written on top of the footer.
What can I do?
Related
I want to print 30 pages with some data on top and some data on bottom.
My code looks like:
<...>
<div style="page-break-after: always">
<div>This should be on top1</div>
<div>This should be on bottom1</div>
</div>
<div style="page-break-after: always">
<div>This should be on top2</div>
<div>This should be on bottom2</div>
</div>
<etc>
I tried everything:
Positions: relative (no change), absolute (footer on first page only), fixed (on last page only)
Setting html, body, each div height to 100%. No idead why should I do this. Did not change anything
Maybe there is a way to force my browser (FF) to stick div to bottom of page?
Finally found an answer:
html,body MUST HAVE height: 100%;
There should be two types of div: outside (size of page), footer
For both set display: block;
For the outside set height: 100%; position: relative;
For the inside set position: absolute; bottom: 0px;
Voila!
Here is my complete code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style>
html,body
{
height: 100%;
margin: 0px;
}
body > div
{
height: 100%;
display: block;
position: relative;
}
body > div > div
{
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
Page1
<div>Page1Footer</div>
</div>
<div>
Page2
<div>Page2Footer</div>
</div>
<div>
Page3
<div>Page3Footer</div>
</div>
</body>
</html>
Update
I played around a little bit with the code above and this may work easier than what I initially thought. (Note, there is potential for the footer to overlap content from the previous div, this could be resolved by adding a margin-bottom attribute to the content div equal to your custom footers set height - Also, if your page content is too long between page breaks, this will still have a couple scenarios that need attending). All that said, I tested locally and it worked as you desired.
CSS
<style>
#media print{
.footer{
position:relative;
top:-20px; // this sets the footer -20px from the top of the next
//header/page ... 20px above the bottom of target page
//so make sure it is more negative than your footer's height.
height:10px;//notice that the top position subtracts
//more than the assigned height of the footer
}
}
</style>
HTML
<body>
<div style="page-break-after: always">
<div>This should be on top1</div>
</div>
<div style="page-break-after: always">
<div class="footer">This should be on bottom of page1</div>
<div>This should be on top2</div>
</div>
<div class="footer">This should be on bottom of page2</div>
</body>
Original Answer
Unfortunately there is no easy way to do this. Browsers do not offer a means of creating custom headers and footers for printing.
Your best bet is to place information you want on every page in the title tag found in the <head><title>YOUR COMMON CONTENT</title></head> It's not going to be the prettiest. It comes down to your requirements.
The other option is to use #media print (CSS) coupled with javascript to dynamically calculate and insert page breaks/gaps of white-space while inserting divs(your custom footer and or header) at absolute positions for the known paper size. Then after the print event dynamically change the format back.
This works for me
Just add following css in your html file
#page {
margin-bottom: 40px;
counter-increment: page;
#bottom-right {
border-top: 1px solid #000000;
padding-right:20px;
font-size: 12px !important;
content: "Page " counter(page) " of " counter(pages);
}
#bottom-left {
content: "Footer content goes here.";
border-top: 1px solid #000000;
}
}
If you use the and elements for your header and footer
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
Source: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size
In this case,I had created a static footer and the element inside the div like button(which alway at the bottom),I had managed to make the height of the div bigger but found that is no efficient to used while the element inside the div was increased and expended.Is it some suggestion else to make it dynamically?thanks.
The sample output might look like this:
When you say static, do you mean a fixed position at the bottom of the window? If so then whatever your height, e.g. 20px, make that the value of the bottom-padding for the main area, then anything in the main area will be padded equally by the height of the footer and will be seen.
Here is a working model for you on JSFiddle.
In HTML, there are 2 divs, "wrapper" and "footer", like:
<div id="wrapper">
line 1 <br />
</div>
<div id="footer">
footer text
</div>
In CSS:
html, body {
height: 95%;
}
#wrapper {
min-height: 100%;
margin-bottom: -1.5em;
padding-bottom: 1em;
}
#footer {
position: absolute; !important
bottom: 0;
}
Here's my footer css:
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
like so
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.
To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.
I suggest you read more about CSS positioning before trying to work on the issue further.
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!