I am trying to position a div (footer) element at the bottom of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.
However, in Safari the footer moves up the printed page if the browser window is not very tall. eg. if the browser window is 200px tall then the footer sits on the print out about 200px down. If the browser is 400px tall it draws the footer 400px down the page.
I would like to get the same behaviour in Safari as I can get in Firefox if possible?
The basic code I am using for this is:
<html>
<head>
<title>Print footer at bottom of a printed page</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height: 100% !important; }
#footer { height:25px; border-top:solid 1px #000;
position:absolute; bottom:0; }
</style>
</head>
<body>
<p>Some content on the page here</p>
<div id="footer">This should appear at the very bottom of the printed page</div>
</body>
</html>
Edit: I'm happy if the solution requires a hack...it only needs to work in Safari
I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css" media="print">
html, body { margin: 0; padding: 0; }
body { height: 11in; width: 8.5in; }
#footer { position: absolute; bottom: 0; }
</style>
</head>
<body>
<div id="footer">
This will always print at the bottom
</div>
</body>
</html>
Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.
This is the code i use. Note I am setting both html and body height to 100% which is needed for Chrome and Safari.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Have you tried this version?
http://www.themaninblue.com/experiment/footerStickAlt/
I know it works in browsers, but not sure about print.
Related
Although a lot of questions have been posted I did not find the answer, so hopefully someone can help.
I have a website which consists of a header and an iframe below it. The iframe's height changes from page to page, sometimes very long, sometimes very small. The iframe must fit the whole width.
I want the height of the iframe to fit the rest of the page (means: the whole page minus the height of the header). I don't care if the iframe is a bit smaller, I am searching for a pixel-exact solution.
Here is a code-example I have generated so far:
<!doctype html>
<html lang="de">
<head>
<style>
header { border: 2px solid blue; }
.iframewrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
border: 2px solid green;
}
.iframewrapper {
padding-top: 40%;
position: relative;
height: 100%;
width: 100%;
border: 2px solid red;
}
</style>
</head>
<body>
<header>
<h1>This is the header.</h1>
<p>Some text.</p>
</header>
<div class="iframewrapper">
<iframe src="iframetest-big.html" frameborder="0" scrolling="yes" />
</div>
</body>
</html>
You can look at it here (or in this css-fiddle, but this is not very figurative because I am not able to embed an iframe-file from an external url).
Now with this code the iframe is either too small (if I have a big window or a small padding-top in the wrapper-class) or to big, causing the appearance of a second scrollbar (if I have a small window or a big padding-top in the wrapper-class). I try to illustrate the situation in this image:
What is the right way to accomplish this?
Flexbox is perfect for that. Just set body to 100vh, set direction to column (so one element under another) and let iframe fill entire flexbox except header space.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
iframe {
width: 100%;
flex: 1;
border: 0;
min-height: 0; /* just due to very small preview stackoverflow fiddle */
}
<!doctype html>
<html lang="de">
<head>
</head>
<body>
<header>
<h1>This is the header.</h1>
<p>Some text.</p>
</header>
<iframe src="https://en.wikipedia.org/wiki/Stack_Overflow" />
</body>
</html>
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
I have a web page as follows:
http://www.transeeq.com/health/bq17a.html#
The yellowish footer does not get pushed all the way to the bottom. Any ideas? Here is the CSS code:
#container {
min-height:100%;
position:relative;
}
#body {
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#CCCC66;
}
It works; your CSS is probably being cached locally. Have you done a forced browser refresh lately? Hit Ctrl+F5.
Try the CSS code to achieve a "sticky footer" (per http://ryanfait.com/sticky-footer/).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
I use this css.
* {
margin: 0;
}
html, body {
height: 96%;
}
.wrapper {
min-height: 96%;
height: auto !important;
height: 96%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
And you can use it in your html page like this
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
It works very well in IE AND Firefox
I just tested it; it extends to the bottom in Chrome, Firefox, Opera, Safari, IE8, IE7, and even IE6. In which browser do you experience this problem, and can you describe your problem in more detail?
have you tried floating the footer to the bottom and changing the position to relative?
You have "height: 60px;" in #footer. Try making that a smaller number in the .css.
Put your footer inside the container div - if you want to have the footer at the bottom of the page (not the bottom of a window) using position:absolute, you need to put it in a relatively positioned div, such as your container.
Have a look at this article
Try position: fixed on the footer instead if you want to ensure that it's always at the bottom of the window. Otherwise, to ensure it's always at the bottom of the document, you can keep its position as relative/auto.
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.
Here is my DEMO:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
</form>
Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:
html,body { height:100%; }
You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.
This site has some excellent examples:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
I also recommend going to http://quirksmode.org/
I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.
Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:
Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - or i'm just too sleepy
Try playing around with the following css rule:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Change the height to suit your page. height is mentioned twice for cross browser compatibility.
you can kinda hack it with the min-height declaration
<div style="min-height: 100%">stuff</div>
You can use the "vh" length unit for the min-height property of the element itself and its parents. It's supported since IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.
It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed
Try Ryan Fait's "Sticky Footer" solution,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.
Try:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Haven't tested it yet...
Sticky footer with fixed height:
HTML scheme:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Try http://mystrd.at/modern-clean-css-sticky-footer/
The link above is down, but this link https://stackoverflow.com/a/18066619/1944643 is ok. :D
Demo:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
I think the issue would be fixed just making the html fill 100% also,
might be body fills the 100% of the html but html doesn't fill 100% of the screen.
Try with:
html, body {
height: 100%;
}
Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
It isn't quite what you asked for, but it might also suit your needs.
I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.
Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.
It is not possible to accomplish this using only stylesheets (CSS). Some browsers will not accept
height: 100%;
as a higher value than the viewpoint of the browser window.
Javascript is the easiest cross browser solution, though as mentioned, not a clean or beautiful one.
#content {
height: calc(100% - the amount of pixels the content div is away from the top);
}
So if your div is 200px from the top, the code you need would be
#content {
height: calc(100% - 200px);
}
I know this is not the best method, but I couldnt figure it out without messing my header, menu, etc positions. So.... I used a table for those two colums. It was a QUICK fix. No JS needed ;)