I am trying to create an html page which will be used for printing data using browser. I need to include a footer with it which will show up in every page at the bottom when printed and I have developed the following code for implementing this.
The following code is working fine, but the problem is when my contents inside the div content gets long enough to make users scroll down the page, that time if I go to the print option of Google Chrome and see the print preview, I can see the footer shows up in the first page, but not in the rest of the pages. But this same code works in firefox and the footer shows up in all the printed pages(and even shows up in the print preview).
Could you please help me to show up the footer in every pages when printed using Google chrome?
Thanks :)
<html>
<head>
<style type="text/css">
html {margin:0;padding:0;border:0; overflow-y: scroll;}
body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
#container {margin:0 auto; height:100%; }
#content{}
#footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
My Contents
</div>
<div id="footer">This is my Footer</div>
</div>
</body>
</html>
Should have position: relative to parent element of footer
and it's parent element is body so give it to body or container
http://jsfiddle.net/jXujq/ See the CSS code...
For anyone still facing this issue, I've created an open-source library that could solve it. It allows printing repeated headers and footers from Chrome, depending on the structure of your html. See this answer:
https://stackoverflow.com/a/34444930/2196424
I've spent a lot of time on this footer thing, I was able to do it on IE using position: fixed and bottom 0, with some body margins to avoid the content from overlapping with the footer.
But with chrome, the only way I was able to do something similar was by using javascript to calculate the white space required to push the footer to the bottom (by assigning that value to an empty div): -
var printPageHeight = 1900; //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();
var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) : printPageHeight - (bottomPos % printPageHeight );
$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
However, getting the size/height of the print page right is very difficult and the height() method of jquery doesn't account for margins and heights.
You need to set in your footer:
position:fixed;
bottom:0;
Maybe this would help you?
CSS Sticky Footer
Related
here's a common thing we do all the time: export from Google docs as 'html' but the end result is a mass of CSS definitions that have a fixed width and is not centered.
I've tried several common HTML fixes and nothing seems to work such as
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 8em
}
...
<P class="blocktext">
even the good old fashioned table does nothing
<table><tr><td align='center'>
and
<table align='center'><tr><td>
For some reason, everything still seems to have the same left-justified text when exported from google doc.
What I'm looking for is CSS code that will perhaps make it more !important than the rest of the CSS so that my document can at least be in the middle of the page.
The actual body content of the Google Doc starts like this:
<body class="c29" >
<p class="c14"><span class="c8">
I do not want to go into the class definitions because there are hundreds of them. What we want is a snippet of code that simply aligns the whole thing in the horizontal middle of the screen.
Ideas?
Place this BEFORE the (or whatever number it happens to be) and your Google Doc export will be perfectly centered. Thanks to Junaid on my dev team for figuring this out!
<style>
body{
margin:0 auto;
}
</style>
I am trying to make a footer for a HTML file where the footer needs to display on every printed page. I found a topic with a solution that locks a specific text to every page I print.
HTML:
<div class="divFooter">This is a footer</div>
CSS:
#media screen {
div.divFooter {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
The problem with this code is that the rest of my code just overwrites this whenever it reaches the footer. Anyone know a nice and quick solution for this? If not, maybe a different way to lock a footer to every page I print of that HTML file? I would also like to note that I cant link a seperate CSS file to the HTML. So every code I make, needs to be in the same file.
Maybe the solution is not just to use HTML and CSS, but to use PHP, making a footer include on each page, so you have a fixed footer for each.
<html>
...
<? php
include_once ("footer.html");
?>
...
I am working/designing the front-end (working on the layout html+css, later will use php, mvc pattern) of a website. The website has a header, body, side menu and a footer The layout is ready.
There are a few forms which are unusually long/huge since all fields are necessary and I could not make them any shorter. The form opens in a new page.
Not to scare the user away I am planning to downsize the header on the form template (the design change will only apply to the form templates) and get rid of the footer completely.
I tried looking a few places but did not find how to go it done. In short, I want the site to have all block i.e. header, body, footer but when it comes to the form I would want to downsize the header and remove the footer to make the form look sleeker.
Is there a way to do this?
Note: I post no code because I have no problem with the code but the concept.
You can use display: none for the footerelement in CSS rules that only apply to this page (for example in a style tag in the head of that page).
Concerning the header, it depends how it is built, if it has a logo, background image, text, menu, whatever. In general you could reduce the height, make the logo smaller, hide parts of the text in there etc.
You can also done this thing using angularjs
ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body >
<div ng-include="'header.html'">
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>
Make sure the body of the page has a class, for example .no-footer .small-header or .form-page. and then in your CSS stylesheet, use something like this :
body.no-footer #footer{
display:none;
}
body.small-header #header{
height:50px;
/* or whatever you want to apply to make the header smaller */
}
I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick
I'm having some trouble getting a website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page displays the footer somewhere in the middle of the page as the height of the html and body tags somehow seems to match the size of my viewport instead of the content. The footer has the color-footer class (you can verify this yourself by dynamically changing the css rules through your browser's developer tools).
OAS: this site was developed by an external and runs on Joomla. I'm not a web developer and I'm just getting a headache from trying to get this to work. I've gone through a dozen of guides but it looks like this time Google couldn't give me the simple solution. After hours of meddling in the developer mode with chrome I can't get it to work so I was wondering if anyone could figure out the correct css rules to add to my stylesheet so I get the desired behaviour.
A JavaScript/jQuery solution:
function CheckFooterPos() {
var Footer = $('.color-footer');
var BottomOfScroll = $('html').scrollTop() + $(window).height();
var BottomOfFooter = Footer.offset().top + Footer.height();
if (BottomOfFooter < BottomOfScroll) {
Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
} else {
Footer.css('bottom', '0px');
}
}
$(document).ready(function() {
$(window).scroll(function(){
CheckFooterPos();
});
$(window).resize(function(){
CheckFooterPos();
});
CheckFooterPos();
});
Because it's position:absolute so, it will so in the middle of the screen.
Just remove position: absolute; from .color-footer { will solved your issue.
.color-footer {
bottom: 0;
height: 66px;
margin-top: 50px;
padding-top: 0;
width: 100%;
// position: absolute; //remove it.
}
Hope it helps.
You can set footer position using javascript if you are not able to fix its position through css, though its possible through CSS too.
http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/
and I guesss
How to keep footer at the bottom even with dynamic height website
this can also help you.