Div width and height to fit a page but also with 3 rows

Question

Question: How do I create a webpage that will print exactly on a 11inch by 8.5 inch piece of paper that has 3 rows (header, content, footer) where the content takes the remaining space that the header and footer don't take?

I am attempting to create a webpage using HTML and CSS that basically has three rows, a header, a footer, and a middle section.

I want the header and footer to take the amount of room they need and then I want the middle row to be stretched to fill in between the header and footer. The middle row should also have exactly 2 evenly sized (width wise) cells. I use CSS display divs to display it as a table rather than using the table element.

The catch is, the sum of the three rows should not exceed 8.5inches. I am using HTML/CSS to construct a document of which will be printed out on standard paper. I always want the footer at the bottom, and I always want the header at the top.

body {
  padding: 0;
  margin: 0;
}
#sheet {
  width: 11in;
  height: 8.5in;
  display: table;
  table-layout: fixed;
}
#header {
  background-color: blue;
}
#footer {
  background-color: purple;
}
#container {
  display: table;
  table-layout: fixed;
  height: 100%;
}
#row {
  display: table-row;
  background-color: yellow;
}
.cell {
  position: relative;
  display: table-cell;
  padding: 10px;
  background-color: green;
}

<div id="sheet">
  <div id="header">
    Curriculum Vitae
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
  <div id="container">
    <div id="row">
      <div class="cell">
      </div>
      <div class="cell">
      </div>
    </div>
  </div>
  <div id="footer">
    Footer
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
</div>

http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages — VilleKoo, Jan 07 '16 at 20:41
html+css is not meant for print, pdf would be . i mean no harm ;) nowdays the flex model will help you here — G-Cyrillus, Jan 07 '16 at 20:43

score 0 · Answer 1 · answered Jan 07 '16 at 20:49

0

It would seem about right if you add width: 5.5in; to your .cell class.

Here's a JSFiddle.

answered Jan 07 '16 at 20:49

guysigner

2,822
1
19
23

score 0 · Answer 2 · answered Jan 07 '16 at 20:51

What browsers do you need to support for this? Using flexbox would make this trivial:

body {
  padding: 0;
  margin: 0;
}
#sheet {
  width: 11in;
  height: 8.5in;
  display: flex;
  flex-direction: column;
}
#header {
  background-color: blue;
}
#footer {
  background-color: purple;
}
#container {
  flex: 1;
  background-color: green;
}

<div id="sheet">
  <div id="header">
    Curriculum Vitae
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
  <div id="container">
  </div>
  <div id="footer">
    Footer
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
</div>

Div width and height to fit a page but also with 3 rows

2 Answers2