Hi everyone I have a html page with big table and when I print the page I want to print footer too at very bottom on every page. I did not find a solution that does this 100%.
What I found is we can use tfoot, this will print on every page at the bottom but not on the last page, like example below
[tfoot example-1][1]
[tfoot example-2][2]
I found another solution which is to use position fixed, it did work but it covers last row of the table in the page. Like example below
[Position fixed example-1][3]
[Position fixed example-2][4]
the style that I use
thead{
display: table-header-group;
}
tfoot{
display: table-footer-group;
}
tr,td{
border: 1px solid;
page-break-inside: avoid;
}
.footer{
position: fixed;
bottom: 0;
text-align:center;
width: 100%;
padding-top: 10px;
}
#media print {
tr {
page-break-inside: avoid;
}
}
Can anyone help me with one of these problems or if there is a solution that I haven't found.
[1]: https://i.stack.imgur.com/DWCZ2.png
[2]: https://i.stack.imgur.com/mkQAb.png
[3]: https://i.stack.imgur.com/vTpam.png
[4]: https://i.stack.imgur.com/t0LQu.png
A display flex css style.
<html>
<head>
<title>this is title</title>
</head>
<style>
.main-container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
<body>
<div class="main-container">
<main>
<h1>every thing within this.</h1>
</main>
<footer>this is footer.</footer>
</div>
</body>
</html>
and have more things in internet. you can search make html footer at bottom. or link
There's also break, break-before and break-after properties which extend the page-break properties for images, code snippets, tables, and lists. Applying break-after to the footer may solve your problem.
Related
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
This CSS works on firefox and chrome, but for some weird reason it wont work on IE =(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>I hate u, ie :p</title>
<style>
header>nav, main, footer>nav {
max-width: 500px;
padding: 0em;
margin: 0em auto;
}
header, footer { min-width: 100%; background-color: #c0c0c0;}
main { background-color: yellow; }
main>section, main>aside { display: inline-block; }
main>section { background-color: aqua; }
main>aside { background-color: pink; }
</style>
</head>
<body>
<header>
<nav>
<ul><li>Header is centered =)</li></ul>
</nav>
<nav>
<ul><li>Header (nemu 2) is centered =)</li></ul>
</nav>
</header>
<main>
<section>
<h1>Why IE won't center me?</h1>
</section>
<aside>
<p>Stackoverflow: please help me</p>
</aside>
</main>
<footer>
<nav>
<ul><li>Footer is centered =)</li></ul>
</nav>
</footer>
</body>
</html>
I'd appreciate it if you help me fix this, preferably without adding/removing elements. I'd like to keep the current semantic if possible. If not, o well...
It is worth to mention that if I do something like <main><div>...</div></main> and add main>div { margin: 0em auto;} IE (and all other browsers, as expected) center main's content. But like I mentioned, I'd like to not break the semantics.
IE does not support the main element. To get it to work, however, you can just set main { display:block; } and it will work. This is a similar fix to the other new HTML5 elements, such as section and nav, which weren't supported but could be added by just adding that CSS.
As I don't have enough reputation, I post my idea as an answer:
My guess is, that you have to add position: relative; for your .main.
Browsers have a default.css with default values for keys you didn't set. I think (but didn't check) the IE has different std-values than other browsers. That could cause problems.
The main element is not supported in IE:
MDN
caniuse
Which I believe means there is no default styling for the main element, so you will have to add it. Most reset stylesheets will do this for you for the newer, more semantic elements.
Add display: block to your CSS selector for main and it should work.
main {
display: block;
max-width: 500px;
margin: 0 auto;
}
Problem Statement is as follows, suppose you have an header containing three elements:
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
Both logo and options have absolute withs of 220px and 294px respectively.
Elements layout arrangement is:
.logo { float:left; }
.search {float:left; }
.options { float:right; }
Now I want to make .search 100% of the window window - 220px - 294px).
The answer to this question should try to seek as answer that do not involve:
css calc function, like: .search{ width: calc(100% - 200px - 294px); }
javascript!
I thought about using a table and let the second td => 'search' calculate it's width automatically.
But seems overkill, to use a table for achieving this.
I'm curious about the answer. Don't bother making fiddles, half word is enough for me.
You can use margin for the search div:
.logo { float:left;width: 220px; }
.search {margin: 0 295px 0 221px;}
.options { float:right;width:294px;}
But for this, html markup should be ordered like this:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
#BhojendraCLinkNepal give a traditional solution which works on old browsers, but you have to change HTML structure. Another solution works on new browsers with flex.
<style>
body {display: flex; flex-direction: row;} /* or the header container */
.logo {width: 220px;}
.search {flex: 1;}
.options {width: 294px;}
</style>
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
See here for browser compatibility.
I thought about using a table and let the second td => 'search' calculate it's width automatically. But seems overkill, to use a table for achieving this.
right, but you could take benefit of display: table-cell (widely supported from all current browsers) without actually using a table
e.g.
<div id="wrapper">
<div class="logo">logo</div>
<div class="search">search</div>
<div class="options">options</div>
</div>
Css
#wrapper { display: table; width: 100%; }
#wrapper > div { display: table-cell; }
.logo { width: 220px; }
.options { width: 294px; }
Live example(1): http://codepen.io/anon/pen/QwjBqQ
Also, on lower screen you may change the position of each block through mediaqueries,
Live example(2): http://codepen.io/anon/pen/ogjMpX
I remeber doing something to the fact of making a "container" div with display-block and then aligning the divs inside just like you would align text. But that was a while back.
You could have aloo at felxbox though http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... no script ... just css ... that does it similar.
So the final solution, that seems to me, to be more balanced is:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
.logo {
float:left;
width: 220px;
}
.search {
float: left;
width: calc(100% - 220px - 294px);
/* fallback for browsers not support calc() */
width: auto\9; /* IE6, IE7, IE8, IE9 */
margin-left: 221px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .logo:width +1 */
margin-right: 295px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .options:width +1 */
}
.options {
float:right;
width:294px;
}
Notes on this solution: Browser hacks are not very elegant, although I tend to use them a lot for IE. If you are completely against it, I recommend you to try to emulate calc using the non-standard expression() syntax.
Thanks everyone!
Another solution could be like this one : jsfiddle
<div class="wrapper">
<div class="search">search</div>
<div class="logo">logo</div>
<div class="options">options</div>
</div>
.wrapper{
position:relative;
}
.wrapper .logo{
position:absolute;
width:220px;
top:00px;
left:00px;
}
.wrapper .options{
position:absolute;
top:00px;
right:00px;
width:294px;
}
.wrapper .search{
position:relative;
width:100%;
text-indent:240px;
}
I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code:
#media print {
p.note {
bottom: 0; position: fixed;
}
}
But now I have a problem with this paragraph going on top of the rest of the copy
According this Mirosoft article, this should work for me:
#page :first {
margin-bottom: 4in;
}
But it doesn't, it doesn't change anything... any ideas?
Here's the solution that worked, CSS is this:
#media print {
p.note {
display:block;
bottom:0;
position:fixed;
font-size:11px;
}
}
And everything needs to be contained in a separate div with this CSS
#wrapper {
position:relative;
bottom:1in;
margin-top:1in;
width:974px;
margin:0 auto;
}
This worked perfectly!
How about adding some z-index ? It seems that the footer overrides the last paragraph
Also try to use
#media print {
p.note {
bottom: 0; position: fixed;
margin-top:10px;
}
}
Make sure that the container for the main content makes room for the footer. For instance, if your markup looks something like this:
<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>
You'd want some css like this:
#content {margin-bottom:4in}
To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.
CSS
table {width:100%;}
#media print {
tfoot>tr {height:20mm;}
tfoot div {position:fixed;bottom:0;}
}
HTML
<body>
<table>
<thead><tr><td>Page header</td></tr></thead>
<tbody><tr><td>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
</td></tr></tbody>
<tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
</table>
</body>
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.