html - 将页面底部的页脚与固定的 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带有粘页脚的属性fixed到屏幕底部，这不是我需要的。找到absolute了看起来很满意但没用的，relative也用过但没成功。

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

如何将 <footer> 元素粘贴在页面底部（HTML5 和 CSS3）？

如何将页脚（div）与页面底部对齐？

以上都没有奏效。

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

请注意，在这种情况下，将 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>

具有位置的元素：绝对；相对于最近的定位祖先定位。然而; 如果一个绝对定位元素没有定位的祖先，它使用文档主体，并随着页面滚动移动。有关更多详细信息，请阅读CSS 布局 - 位置属性

检查您在jsfiddle中的代码

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

尝试为页脚放置bottom:0或margin-bottom:0样式。指定您需要的高度。