Align footer at bottom of page with fixed html page height

Question

I am creating a test certificate using simple html but facing a problem.

The footer is placed just where the screen height ends and not the html height.

Following is html:

html {
  height: 1366px;
  font-size: 15px;
  border: 1px solid black;
  margin-left: 20px;
  margin-right: 20px;
}

body {
  margin: 0;
  padding: 0;
  height: 1366px;
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: center;
}

table {
  border-spacing: 2px;
}

.no-border {
  border-left: 1px solid transparent;
  text-align: left;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  padding-bottom: 0px;
}

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  @page {
    size: auto;
    /* auto is the initial value */
    margin: 0mm;
    /* this affects the margin in the printer settings */
  }
  .page-break {
    display: block;
    page-break-before: always;
  }
}

.no_left_right {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.no_bottom {
  border-bottom: 1px solid transparent;
}

.no_top {
  border-top: 1px solid transparent;
}

.custom_width {
  width: 5%;
}

.no_borders {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
}
.footer_table{
   position: absolute;bottom: 0;
   left: 0;
   width:100%;
   clear:both
 }

 

  <div style="text-align:center;font-size:18px;"><b>Company name.</b></div>
   <div style="text-align:center;font-size:18px;">Location</div>
   <hr>
   <div style="text-align:center;font-size:18px;"><b>TEST CERTIFICATE</b></div>
<table style="width:50%;margin-top:5px;" align="center">
    <tr>
        <th>Sr No.</th>
        <th>Coulmn</th>
        <th>Remark</th>
    </tr>
    <tr>
        <td>1</td>
        <td>3</td>
        <td>LOW</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>LOW</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>LOW</td>
    </tr>
</table>
<table style="" class="no_left_right no_bottom footer_table footer_table">
    <tr>
        <td style="width:20%;border:1px solid transparent";></td>
        <td style="width:20%;border:1px solid transparent";></td>
        <td style="width:20%;border:1px solid transparent";></td>
    </tr>
    <tr>
        <th style="width:25%;border:1px solid transparent"></th>
        <th style="width:20%;border:1px solid transparent"></th>
        <th style="width:45%;border:1px solid transparent"></th>
    </tr>
    <tr>
        <th style="width:25%;border:1px solid transparent"></th>
        <th style="width:20%;border:1px solid transparent"></th>
        <th style="width:45%;border:1px solid transparent"></th>
    </tr>
    <tr>
        <th style="width:25%;border:1px solid transparent">Tested by</th>
        <th style="width:20%;border:1px solid transparent">Seal</th>
        <th style="width:45%;border:1px solid transparent">Authorized Signatory</th>
    </tr>
</table>
<table style="" class="no_left_right no_bottom footer_2 footer_table">
    <tr>
        <th rowspan="3" style="width:65%"><b>TESTED ON <img src="" style="width:10%;margin-bottom:-7px;"> XYZ TESTER</b></th>
        <td style="width:70%;border-left:1px solid transparent;border-top:1px solid black;border-bottom:1px solid transparent;border-right:1px solid black;text-align:left">
            <table style="width:100%;" class="no_borders">
                <tr>
                    <td style="width:10%;border:1px solid transparent;text-align:left"><b>Model</b></td>
                    <td style="width:20%;border:1px solid transparent;text-align:left"><b>: B 3000-TS</b></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="width:70%;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid black;text-align:left">
            <table style="width:100%;" class="no_borders">
                <tr>
                    <td style="width:11%;border:1px solid transparent;text-align:left"><b>Serial No </b></td>
                    <td style="width:20%;border:1px solid transparent;text-align:left"><b>: 11/2017-285</b></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

The things which are bothering me :

How to keep the footer(s) to bottom of page, with fixed height of html by 1366px ?

My research :

1) position attribute with fixed sticks footer to screen bottom which is not what i need. Found absolute which looked satisfying but did not worked, relative was also used but did not succeed.

2) display:table ,flex might be useful but not sure how to use it.

How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

How to align footer (div) to the bottom of the page?

None of the above worked.

Will somebody help me to fix above issues ?

Please note maintaining height of html page by 1366px is necessary / compulsory in this case.

Can you move the inline style to internal style, then anyone can easily find the issue. Now it's very confusing — Srikrushna, Dec 29 '18 at 19:19
@Vikrant as you mentioned you used position relative. Can you tell where did you use it? — Baezid Mostafa, Dec 29 '18 at 19:53

score 1 · Answer 1 · answered Dec 29 '18 at 20:10

You want to keep the footer at the bottom of HTML with a fixed height of HTML by 1366px. Please check the example below.

html {
  height: 1366px;
  font-size: 15px;
  border: 1px solid black;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
}

.content {
  height: 300px;
  width: 100%;
  border: 1px solid red;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border: 1px solid yellow;
}

<div class="content">
  <p>
    Content box Sample Height 300px.
  </p>

</div>
<div class="footer">
  <h1>
    Footer
  </h1>
</div>

An element with position: absolute; is positioned relative to the nearest positioned ancestor. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. For more details Please read CSS Layout - The position Property

Check your code in jsfiddle

This answer is correct. Thanks for explanation and snippets. +1 — Vikrant, Dec 29 '18 at 21:22

score 0 · Accepted Answer · answered Dec 29 '18 at 20:02

You should achieve this using css position absolute! In css do the following change!

body {
  position: relative;
}
.footer_table {
  position: absolute;
  bottom: 0;
  width: 100%;
}

and in html, you should have body tag!

<body>
  <!--- content here --->

  <table class="footer_table">
    <!--- content here -->
  </table>
</body>

score -1 · Answer 3 · answered Dec 29 '18 at 19:08

-1

Try putting bottom:0 or margin-bottom:0 styles for the footer. specify the height whatever you need.

answered Dec 29 '18 at 19:08

Sivaramakrishnan

350
3
18

As you can see i have already added `bottom:0` for the 2 footer tables and it is not working. Please note height of the whole html should be 1366px and not of the footer. – Vikrant Dec 29 '18 at 19:11

Align footer at bottom of page with fixed html page height

3 Answers3