将页面底部的页脚与固定的 html 页面高度对齐

Question

我正在使用简单的 html 创建测试证书，但遇到了问题。

页脚位于屏幕高度结束的位置，而不是 html 高度。

以下是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>

困扰我的事情：

如何将页脚保持在页面底部，html 的高度固定为 1366 像素？

我的研究：

1) position 属性与fixed 将页脚粘贴到屏幕底部，这不是我需要的。找到了absolute，看起来很满意但是没用，relative也用过但是没成功。

2) display:table ,flex 可能有用，但不知道如何使用。

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?

以上都不起作用。

有人可以帮我解决上述问题吗？

请注意，在这种情况下，将 html 页面的高度保持 1366px 是必要的/强制的。

Answer 1

尝试为页脚添加bottom:0 或margin-bottom:0 样式。指定你需要的高度。

Answer 2

您应该使用 css position absolute 来实现这一点！ 在 css 中进行以下更改！

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

在html中，你应该有body标签！

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

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

Answer 3

您希望将 页脚保持在 HTML 的底部，并且 HTML 的高度固定为 1366 像素。请检查下面的示例。

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>

具有 position: absolute; 的元素被定位为 relative 到最近的定位的祖先。然而;如果一个绝对定位元素有无定位祖先，它使用文档正文，并随着页面滚动移动.更多详情请阅读CSS Layout - The position Property

在 jsfiddle

中检查您的代码