I'm not really good at CSS and I'm trying to figure out how to do the following for a website I need to adapt:
container_div(directly under body) of 100% height (body is also 100% height), with header of 170px height, then content div (which should be stretched from bottom header down to), footer div with copyright notice of 50px height.
in content there should be a left and right div (both position: relative; float: right/left;)
almost something like: yet another HTML/CSS layout challenge - full height sidebar with sticky footer
but then content should be overflow: hidden (i use a custom scrollbar script)
The part which I can't figure out is how to let the content div (between the header and footer div) consist of the remaining hight.
I've tried fiddling with adding background to container with 100% height, but since my header and footer are transparant you can see the background of content through them which is ugly.
Can somebody give me a nudge in the right direction with a standard template? I can figure out the rest myself.
Just the CSS code for the content div would be fine either (with some explanation regarding to the rest of the css)
EDIT:
Just so we have something to work with (which is easier to answer my question to)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>stretchy footer</TITLE>
<LINK rel="stylesheet" type="text/css" href="index.css" />
</HEAD>
<BODY>
<DIV id="container">
<DIV id="header">
<IMG src="./image/header2.png">
</DIV>
<DIV id="left">
<DIV id="content">
This is the div which needs to be stretched between header and footer.
</DIV>
test<BR>
test<BR>
test<BR>
test<BR>
test<BR>
</DIV>
<DIV id="right">
t
</DIV>
</DIV>
</BODY>
</HTML>
css style:
/* <GENERAL> */
/* cross-browser reset stylesheet */
* { margin: 0; padding: 0; border-style: none;}
*:hover, *:active, *:focus {
outline: 0;
}
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
line-height: 1;
-moz-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
-webkit-min-device-pixel-ratio:0;
height: 100%;}
body {height: 100%;} /* safe crossbrowser font */
a {text-decoration: none; outline: none;}
a:active {
border: none;
outline: none;}
.imagewrapper img {
display: inline-block;
width:100%;
-ms-interpolation-mode:bicubic;
image-rendering:-webkit-optimize-contrast;
image-rendering:-moz-crisp-edges;
image-rendering: optimizeQuality;
zoom:1; *display: inline;}
/* </GENERAL> */
.clear {
clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */
}
#container {
height: 100%;
width: 1018px;
margin: 0em auto -10em auto;
position: relative;}
#left {
display: inline-block;
float: left;
height: 100%;
width: 950px;
padding: 0em 2em 0em 1em;
border: 1px solid brown;
background: url(./image/main.png);
}
#left p {
text-align: justify;}
#right {
float: right;
width: 14px;
border: 1px solid red;
}
There are several ways to use CSS to help lay out your Div's. You are on the right page with considering the float: left / right and position:relative. I guess to fully answer your question I would need to know the following:
Are you giving a minimum height to the Div or do you just want it to scale to the size of the contents?
If you use your outer div's as main space holders and then fill them with inner div's that are "position:relative;" and "float:left / right"(whichever you need) then your page body will stretch to the size of the content added. If you have a max height and adding some scroll bar functionality we would need to know if that scroll bar tool has it's own height set (is it it's own div / panel?).
One more point to add is that when using float's you will need to include a div with clear:both as a style. This way lines break correctly.Use this after any line of elements that you want to create a break. Be sure to check in both IE and Firefox as they act differently ... and forgetting the <div class="clear" runat="server"> element will make the page look funny. CSS for the "clear" class is here:
.clear
{
clear:both;
}
I used these links when first figuring this stuff out:
CSS Position: http://www.barelyfitz.com/screencast/html-training/css/positioning/
CSS Height: http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
Just be aware that IE and other browsers differ. Attributes like height="auto" is not fully supported by all browsers so you would need to take this into account.
Finally, if you are looking to get things to stretch you may need to play around with the width attribute (e.g. height=99%). Generally I just let the height of the page's main content section be dictated by the contents. I wrap all the "body" portion of the page (not html body but main content and any columns) in a div with a relative position and that way if I have a left or right column with less elements than the main section, setting all to height = inherit ... or height = 100 / 99% should work, but you need to play around with it based on what you are doing as to get a browser neutral rendering may have some to do with the styles in the elements you are adding.
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
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
I have a number of display: inline-block div elements of fixed width and variable height.
I want to print each div without wasting paper. I concatenated the divs to make a single HTML document which I would then print. Example document with empty divs:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test page</title>
<style type="text/css">
div{
display:inline-block;
width: 13cm;
background-color: #999;
margin: 1mm;
}
</style>
<div style="height:10cm"></div>
<div style="height:20cm"></div>
<div style="height:14cm"></div>
<div style="height:20cm"></div>
<div style="height:15cm"></div>
<div style="height:30cm"></div>
<div style="height:20cm"></div>
<div style="height:27cm"></div>
The result was unsatisfying. Firefox aligned the divs in a kind of table with each div taking up the bottom part of a "cell". This wastes a lot of space if I have a big div on the same "row" as a smaller one. I've also tried adding float: left to the div styling, but this only made the divs take up the top part of the "cells" instead of the bottom part.
What's the least kludgy way to fix this?
Since all of your elements have the same width, you could use the columns property. However, the elements will be arranged from top to bottom rather than left to right:
http://tinker.io/f834a
body { /* or whatever is containing your elements */
columns: 13cm; /* width of your elements */
}
Prefixes may be necessary. http://caniuse.com/#feat=multicolumn
You could do something like this, it works great if you're fine with just 2 columns:
div:nth-child(odd)
{
float: left;
clear: left;
}
div:nth-child(even)
{
float: right;
clear: right;
}
jsFiddle
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!
I just wonder because I know that my page goes haywire if you try to make it too small. Facebook, StackOverflow and almost any other well programmed site calmly adjusts the page format until they run out of 'breathing room' at which point the page is just 'eaten' by the browser's borders. How do these well programmed sites format themselves so nicely as to cope with window resizing? Are there CSS properties specifically made to help with this?
You can center your site by using a main "wrapper" div.
<div id="wrapper">
//all you content here
</div>
Then in you css your set the "wrapper" as follows
#wrapper{
width:900px //or whatever
margin: 0 auto; }
This gives it a width and a flexible margin. When the window is resized too small, it just "eats" it, as you say.
The key here is a flexible layout, either make the margin flexible (as I outlined above) or make the content flexible.
Another way to do this is to make almost everything flexible, something like this..
#wrapper{
border:1px solid red;
width:50%;
min-width:300px;
margin:0 25%;
height:50px; //for display only
}
http://jsfiddle.net/jasongennaro/6FCjZ/1/
You should look into "Fluid" CSS designs. These are CSS rules that are designed to manage a pages width.
A common way of doing this is to use max-width and min-width to manage the over all width of the website.
For example:
Click here to see a live example.
<html>
<head>
<title>Width Test</title>
<style>
#main-content {
background-color: #EEF;
border: 1px solid #003;
max-width: 45em;
min-width: 20em;
padding: 1em;
margin: 0 auto; /* center */
}
.box {
border: 1px solid #000;
background: #363;
color: #fff;
padding: .25em;
}
.left {
float: left;
margin: .5em 1em .5em 0;
}
.right {
float: right;
margin: .5em 0 .5em 1em;
}
</style>
</head>
<body>
<div id="main-content">
<p>Resize Me...</p>
<span class="box left">left</span>
<span class="box right">right</span>
<p>Fluid Layout</p>
</div>
</body>
</html>
The key element here is the styling on #main-content. The rest of that is so you can see it in action.
Both those websites are a fixed width but with expanding header backgrounds. There's nothing special going on.
The header (blue/grey bar) has a 100% width with a fixed width container inside that is centered.
Defining a width of pixels to a div usually gives it a fixed layout, while using percentage gives a fluid layout.
For kicks, check out the 960.gs, which uses a fixed layout, and is great for avoiding cross-browser issues:
http://960.gs/
There's also the fluid version of the 960.gs:
http://www.designinfluences.com/fluid960gs/