将页面底部的页脚与固定的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的高度固定为1366px？

我的研究：

1）具有position的{​​{1}}属性将页脚粘贴到屏幕底部，这不是我所需要的。发现fixed看上去令人满意，但没有用，absolute也被使用了，但没有成功。

2）relative，display:table可能有用，但不确定如何使用。

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

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

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

中检查您的代码

Answer 2

您应该使用CSS绝对位置来实现！ 在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

尝试为页脚放置bottom:0或margin-bottom:0样式。随便指定高度。