I've a lot of contents on page which i don't have control of where it breaks. And I've placed some contents using position:fixed on each page as header/footer but it overlap with text. I tried to solve the overlapping using margin and padding in following two ways.
When i added margin using #page
#page {
margin: 2cm;
}
It works on every page as it says, but my header and footer also taken away from margin.
So I tried to adding margin using body tag
body {
margin: 2cm;
/* padding: 2cm; */
}
it work by adding 2cm top margin on first page and 2cm bottom margin on last page. But not in between pages.
Is it possible to set margin/padding each page?
I encountered exactly the same problem and after searching a lot I found an interesting article offering a combinative solution which you can read here.
In short it combines two methods:
Using position: fixed technique
Using thead tbody tfoot
If you only use the first method you will face the overlapping issue, in the same way if you only use the second method, footer will stick to the bottom of the content of page which might ended in the beginng of the last page, but combination of both methods resolves the problem.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-footer:after {
counter-increment: page;
content: counter(page)
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer, Page #
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Here you can see a working demo.
To make sure this solution works properly, try to print it by pressing Print Me! button.
You might even need to have page number in the footer, it's done by CSS too, you only need to add following CSS:
.page-footer:after {
counter-increment: page;
content: counter(page)
}
In some articles it's content: counter(page) " of " counter(pages);, but in my case pages returns 0 all the time for no reason, so I ignored it, maybe you can achieve the count of total pages by using CSS var().
For the record if you'd like not to observe the header and footer before printing you can add following CSS:
#media screen {
.header, .footer {
display: none;
}
}
Update 2020:
It seems page number doesn't work anymore.
Your first option was correct, what you need to do is just position your header and footer as running.
#page {
margin: 2cm;
#top-center {
content: element(pageHeader);
}
#bottom-center {
content: element(pageFooter);
}
}
#pageHeader{
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
#page {
padding: 2cm;
margin: 3cm;
}
Try this...
Be sure to have a stylesheet assigned for printing.
It could be a separate stylesheet or you can use bootstrap stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheet or in the shared one using media queries as:
#media print {
/* Your styles here */
}
Related
Problem
I am working on a project in which I need to convert HTML to a PDF. I am doing this simply with the browsers print capabilities. The problem came when I added headers and footers to my document using the method described here.
In my document I am also using css columns, and for some reason, only when there is at least one full column AND less than one page of content being printed, it adds a blank page at the beginning and end of the document leaving me with 3 pages. This is not ideal as I am aiming to automate this process in the future and having extra blank pages with just the header and footer being printed is not acceptable.
I initially thought there must be some invisible margin causing the blank pages to be added, but as soon as it gets to more than one page of content the blank pages disappear and the output is as expected.
I am not proficient with CSS at all so if someone has any insight as to why this is happening, and preferably how I can solve it, I would be very grateful to hear it.
Here is the HTML and CSS which causes the extra blank pages when printed. To see how it reverts back to normal, just add more content to the page div so that it creates more than one page of content.
EDIT: To see the problem you'll have to run this code in the firefox browser since chrome doesn't support the column-fill property meaning the columns will be balanced and none of them will be filled.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
columns: 3;
column-fill: auto;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<!-- <div class="page">PAGE 1</div>
<div class="page">PAGE 2</div> -->
<div class="page" style="line-height: 1;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
<!-- fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum. -->
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Im trying to develop html with sticky header and footer at all pages...
This Source Ultimate printable HTML layout with repeating header & footer on every page is best example i could find for actaully applicable but im facing a small issue with it
Im converting the HTML string to A4 Size paper for printing the document...
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
size: A4;
margin: 5 auto;
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
</style>
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
if
.page-header, .page-header-space {
height: 210px;
}
its working perfect but if i give the height more than 210 / 220 px
for example
.page-header, .page-header-space {
height: 250px;
}
the content of the body is hidding behand the header...
what could be the possible solution to overcome the problem.
Example of the error from actual output
Output with 210px or Below
Output with 250px
Thank you for your precious time.
Here is the description of the feature I really struggle to do.
Mockup
Description
A generated pdf document contains many sections
Some sections can print on many pages
We don't know the size of the content (variable height)
The page must not have margins (the headers are positioned (0,0) and have the same width as the page, documents are printed bordeless)
The content can be anything : paragraphs, titles, images, graphs, svg elements, tables, ...
Objective
When the content of a section auto break on the next page, that page should have a margin equal to the header
Exemple: the section #2 is printed on the pages 2 & 3 ; the page 3 should have a top margin.
Problem
Because the page margins are set to "0", we should define a padding/margin after a natural page break but, I can't find how to make it work nicely (1)
Technical
I'm using RelaxedJS (pdf is generated with Chromium)
Thank you so much in advance if you know how to handle that specific case. I've read so many documentation. The best candidate could be CSS Fragmentation Box Decoration Break Clone but I can't make it work with blocks, only inline elements and paragraphs.
(1) I have tried a solution using table and a thead setting the margin on top of the page... but it's not working when you fill the cells with content. I guess the has serious limitations when using #page rules.
I had to face the same issue a few days ago.
The idea was simple, you have to do this:
Set #page margins (considering the height of the header and footer)
Set header and footer position: fixed and adjust the top and bottom properties.
Control the .page-content with page-break-after to make sure the content go to the next pages.
Notice that I used the DOMPDF Laravel to generate the PDF. May be there are some differences using RelaxedJS but anyway you can try this just in case.
I hope this can help you. Here is the same code in Codepen
#page {
margin: 160px 0px;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h2 {
text-align: left;
margin-left: 50px;
}
header {
background-color: yellow;
width: 100%;
height: 120px;
color: black;
display: flex;
align-items: center;
position: fixed;
top: -120px;
left: 0px;
right: 0px;
}
.page-content {
margin-top: 0px;
margin-bottom: 60px;
}
.page-content p {
page-break-after: always;
padding: 5px 30px;
}
.page-content p:last-child {
page-break-after: never;
}
footer {
position: fixed;
bottom: 50px;
right: 0;
left: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
height: 50px;
}
footer, .page-content {
margin-left: 100px;
border-left: solid black 1px;
}
<header><h2>HEADER SECTION #</h2></header>
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque neque vel lectus rutrum, quis suscipit tortor ornare. Maecenas a enim sit amet neque vehicula imperdiet. Donec auctor convallis tellus. Suspendisse a arcu a tortor congue aliquet vel a justo. Cras sit amet pulvinar tortor. Vestibulum vel lobortis libero, eu accumsan ipsum. Donec felis sem, consequat quis pharetra sit amet, facilisis eget odio. Suspendisse nec vestibulum urna, non fermentum lorem.</p>
<p>Sed orci neque, fringilla nec urna at, iaculis laoreet metus. Nam fringilla sit amet sapien iaculis malesuada. Duis pellentesque odio vitae quam pellentesque sollicitudin. Duis nec commodo mauris, ac eleifend nunc. Vestibulum ac finibus nisi. Aliquam at neque augue. Cras metus mi, ultricies vitae dui sit amet, lacinia aliquet nunc. Duis vitae urna et arcu auctor tristique et id lectus. Praesent ut sollicitudin nibh. Mauris quis vehicula ipsum. Quisque feugiat nec felis et cursus. Donec neque ante, accumsan a tincidunt at, ultrices et lectus. Nullam finibus, ipsum facilisis euismod accumsan, nulla quam ultrices odio, id efficitur purus nisl id lacus. Duis bibendum est quis ligula aliquam rhoncus. Nunc dapibus, odio vel tincidunt faucibus, justo dolor tempor nisl, eu maximus nibh odio nec risus. Nullam ut lacinia purus.</p>
<p>Praesent finibus nisi congue sodales elementum. Vestibulum mauris libero, varius a urna at, vestibulum eleifend nisl. Maecenas et metus dapibus, semper quam a, suscipit libero. Mauris malesuada pretium maximus. Sed semper urna vitae iaculis mattis. Praesent luctus, ipsum et consequat lacinia, purus nisi scelerisque sem, eu luctus metus erat at arcu. Aenean aliquam fermentum condimentum.</p>
<p>Pellentesque felis mi, semper ac ullamcorper vel, accumsan ac tortor. Donec vestibulum varius enim, vitae tempor ligula accumsan eget. Etiam quis nunc felis. Phasellus scelerisque, purus eget sollicitudin gravida, felis justo euismod dui, ut fringilla nulla nunc vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo pretium sapien eleifend molestie. Nullam consequat ligula sit amet purus sodales vehicula. Duis placerat aliquet augue, ut dapibus turpis malesuada sit amet. Vivamus id nulla odio. Integer a velit ac eros rutrum tempus. Vestibulum quis sodales turpis.</p>
<p>Vivamus eu enim fringilla turpis euismod finibus id quis dolor. Pellentesque ex massa, congue at nisl at, lacinia ornare urna. Aenean pretium posuere dictum. Nullam justo metus, eleifend a dictum sit amet, gravida ut arcu. Fusce libero leo, sollicitudin at est non, venenatis auctor nulla. Vivamus luctus tellus eu metus interdum congue eget non magna. Curabitur congue felis nulla, eu consectetur tellus viverra et. Nunc ullamcorper ac nisl a elementum. Morbi viverra magna in orci tristique, eget suscipit nunc suscipit. Morbi sodales dolor a feugiat bibendum. Duis nunc nisl, pulvinar at sem quis, cursus lacinia arcu. Aliquam in dictum arcu.</p>
</div>
<footer>Page X</footer>
I used this code to print a table using JSTL. The table was in the contentFrame div. However, the footer which was initially at the bottom started to float and overlap with the contentFrame. I don't want to keep the footer in a fixed position though. Is there a way to keep it at the bottom of the page such that when new content is added it is "pushed" down?
body {
background-color: blue;
}
#contentFrame {} #date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
background-color: orange;
bottom: 0px;
left: 0px;
position: absolute;
text-align: center;
width: 100%;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#email.com </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
EDIT: used the sticky footer from bootstrap and it worked
One way to solve this is:
Give the #footerFrame a default position: absolute
Use .js to monitor the height of the browser viewport and the height of the #contentframe
If #contentframe height exceeds the remaining viewport height, change #footerFrame to position: relative
function positionFooter() {
var contentFrame = document.getElementById('contentFrame');
var footerFrame = document.getElementById('footerFrame');
var contentY = contentFrame.offsetTop;
var contentHeight = contentFrame.clientHeight;
var viewportHeight = window.innerHeight;
var footerHeight = footerFrame.clientHeight;
if ((contentY + contentHeight) > (viewportHeight - footerHeight)) {
footerFrame.style.position = 'relative';
}
else {
footerFrame.style.position = 'absolute';
}
}
window.addEventListener('load',positionFooter,false);
window.addEventListener('resize',positionFooter,false);
body {
background-color: blue;
}
#contentFrame {
height: 300px;
}
#date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: orange;
text-align: center;
}
body, #contentFrame, #footerFrame, #footerFrame p {
margin: 0;
padding: 0;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#pointwestcom.ph </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
You should use <div style="clear:both;"></div> to clear float before footer this way:
<div style="clear:both;"></div>
<div id="footerFrame">
<p>footer</p>
</div>
but no need to make position of footerFrame absolute:
#footerFrame {
background-color: orange;
text-align: center;
width: 100%;
}
and TO LEARN MORE ABOUT FLOATS check this out:
https://css-tricks.com/all-about-floats/
How big is your content?
If you remove the 'position: absolute;' or 'bottom: 0px;' from the #footerFrame css, the footer will move up to position itself under the page content.
If your content isn't big enough to fill the window, this may not be desired.
There is a number of footer solutions already on SO if you search for them that will show you the many ways you can achieve a footer solution that will work for you.
EDIT NOTE: this answers a different question, as I thought the header/footer needed to be in a fixed position. Left here for usefulness based on question title, but otherwise incorrect.
If you're able to accurately declare the height of your header and footer, this is exactly what position:fixed was made for.
NOTE: I only used [attribute] selectors for speed of creating the demo! Use classes instead in your actual production code- it's what classes are for, and doesn't run the risk of getting blasted by some shiny new feature at some point in the future!
http://dabblet.com/gist/a633128f55dbcc160ecc
[head]{
position:fixed;
width:100%;
top:0px;
height:20px;
background-color:#ccc;
}
[foot]{
width:100%;
position:fixed;
bottom:0px;
height:20px;
background-color:#ccc;
}
[cont]{
/*set the top margin to the height of the header, plus a bit of buffer*/
/*set the bottom margin to the height of the header, plus a bit of buffer*/
margin:25px 0 25px;
}
<div head>
This is a header
</div>
<div foot>
This is a footer
</div>
<div cont>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p>
<p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p>
<p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p>
<p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p>
<p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p>
</div>
If you're unable to declare the heights, well... you can fake it by including an exact copy of your header and footer without the position:fixed; but with visibility:none; above and below your content (respectively). Note that depending on how you do this, why the size is non-declarable, and what your header/footer contains, this may or may not be viable.
A less hacky way would be to add the margins with js based on the display size of your header/footer. I would actually suggest doing this instead, so long as the target browsers can support it.
If you want the footer to only marry the bottom if the content goes past it, you'll have to use js to detect the window size and default the footer/header to relative. If the window overflows, switch to fixed.
I have a menu on the left side of my page and the content on the rest of the page. I have a dark, textured background so I want a semi-transparent background for the leftmenu div and a semi-transparent background for the content div. However, it seems like the body div is overlapping the menu div and stacking its transparency and also making the content of the menu div transparent.
I would rather have a space between the two sections. Could someone take a look at my code and offer a suggestion?
I have some code listed below but take a look at the jsfiddle to get the full picture.
http://jsfiddle.net/5xmze/ (Note, the links should be the same color as the header)
CSS:
#body{
padding-left:2px;
width: 85%;
position: relative;
background-color:rgba(0,0,0,0.6);
}
#leftside {
float: left;
width: 15%;
height: 100%;
}
HTML:
<div><span id="leftside">
<ul class="leftmenu">
<li class="leftmenu">Home</li>
<li class="leftmenu">Projects</li>
<li class="leftmenu">Resume</li>
<li class="leftmenu">Contact</li>
</ul></span>
</div>
<div id="body">
Content here...
</div>
Here's what I'm attempting to accomplish:
The best way would be to put the menu, and the body into the same parent div, then float:left; the body so it shows up beside the menu.
Don't forget to set a width to both elements, because if #body's width is bigger than space available on the page, it will show up under the menu.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$(window).resize( function() {
var s = $("body").width();
$("body").css({ "min-width":s+"px" });
});
});
</script>
<style>
/* style.css */
body {
font-size: 1em;
background-image:url('http://i1358.photobucket.com/albums/q764/kenny_johnson5/blackorchid_zpsc8d78a87.png');
color:#FFF;
font-family:Arial;
width:85%;
margin-left:16%;
}
h1 {
font-family:Cambria,Serif;
color:#81E500;
text-align:center;
}
#top{
width: 85%;
position: relative;
}
#body{
padding-left:90px;
width: 85%;
position: relative;
background-color:rgba(0,0,0,0.6);
}
a {
color:#81E500;
font-family:Cambria,Serif;
font-size:1.5em;
}
#leftside {
float: left;
width: 15%;
height: 100%;
margin-left:-15%;
z-index:999;
}
ul.leftmenu {
list-style-type:none;
margin:0px;
padding:1px;
background-color:rgba(0,0,0,0.6);
border: 1px solid;
border-color:#000;
height:100%;
}
li.leftmenu {
padding:5px;
}
</style>
<html>
<div><div id="leftside">
<ul class="leftmenu">
<li class="leftmenu">Home</li>
<li class="leftmenu">Projects</li>
<li class="leftmenu">Resume</li>
<li class="leftmenu">Contact</li>
</ul></div>
</div>
<div id="body">
<div id="top">
<h1>Header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt erat sit amet dolor imperdiet dignissim. Nunc eu enim erat. Suspendisse commodo faucibus risus at facilisis. Phasellus tortor urna, fringilla sed blandit non, porta vel enim. Vivamus placerat, risus et molestie elementum, risus elit dignissim elit, non porttitor nisl tortor sed lorem. Maecenas scelerisque mattis massa, vel blandit erat blandit sed. Vivamus erat augue, varius ac aliquet non, commodo id massa. Maecenas sit amet est posuere turpis ultrices aliquam. Nulla feugiat ultrices diam vitae egestas. Phasellus risus augue, dapibus nec condimentum non, tempus eu massa. Etiam sodales sodales dolor eu convallis.
</p>
<p>
Aenean in dignissim metus. Suspendisse placerat pharetra justo, et tristique neque vestibulum non. Quisque malesuada scelerisque diam eget suscipit. Donec non sollicitudin justo. Etiam sit amet massa felis. Maecenas aliquet cursus tristique. Etiam sollicitudin augue in risus venenatis rhoncus. Pellentesque tellus diam, porttitor in dapibus eu, rutrum eu lectus. Vestibulum luctus hendrerit augue vitae interdum. Donec in turpis malesuada arcu tempor placerat. Aliquam eget nisl ipsum. Cras blandit elementum vulputate. Ut vulputate ullamcorper urna, quis congue mauris laoreet nec. Morbi vitae dui eros.
</p>
<p>
Phasellus rhoncus ultrices sem et dictum. Ut ut nisl eget eros porttitor commodo auctor vitae leo. Quisque sed nulla augue, vel venenatis augue. Pellentesque bibendum sodales lectus, quis malesuada risus consectetur a. Aliquam lobortis aliquet vulputate. Duis sed velit est, in venenatis est. Vivamus viverra lacinia sapien non sodales. Aenean eleifend quam diam, id gravida tellus. Praesent dui sem, volutpat eu blandit in, volutpat ornare nulla. Nunc sed eros dolor.
</p>
<p>
Quisque sit amet diam nisl, volutpat interdum arcu. Proin et justo lorem. Mauris vitae egestas lacus. Nullam ut laoreet turpis. Donec eget metus enim, id porta orci. Nam condimentum feugiat tempor. Nunc ultricies pellentesque euismod. In hac habitasse platea dictumst. Etiam fringilla bibendum sapien, eu vestibulum nisi imperdiet tempus. Duis tincidunt magna id sapien porta vel aliquam massa tincidunt. Maecenas ut metus id augue congue scelerisque id nec enim. Ut ac nibh est, et laoreet orci. Nulla fermentum laoreet augue, in vulputate risus varius vel. Sed ac nunc quis tortor scelerisque rutrum.
</p>
<p>
Nullam adipiscing ultricies lacus ac pretium. In hac habitasse platea dictumst. Nullam convallis libero non augue sollicitudin mattis. Nunc commodo pharetra magna, tempor sagittis sem vehicula nec. Quisque massa ligula, gravida nec fringilla quis, tempus vel dolor. Nam et sem bibendum mi consectetur tincidunt. Nam placerat venenatis odio sit amet imperdiet. Integer luctus quam quis quam lobortis aliquam. Cras dignissim semper erat, ac laoreet leo volutpat quis. </p>
</div>
</body>
</html>