html - 页眉越过页脚

Question

我的网站需要帮助

我的第 3 个页眉超出了页脚。

我的代码如下:

    <div style="width: 100%; display: table;">
    <div style="display: table-row">
    <!-- ------------------------------------------------------------------ -->
	<!-- Manufacturing Division -->
    <div style="width: 770px; height:450px; display: table-cell; background-color:#17202A ;">
	<p style="text-align:center; font-size: 30px; color:white">Manufacturing Division</p>
	<center>
	<img src="board.jpg" align="middle" style="width:250px; height:150px; text-align:center">
	</center>
	<p style="font-size=10px; text-align:center; color:white">
	With more than 20 years of expertise in Electronics Manufacturing, <br>
	we are happy to be your partner for your electronics manufacturing <br>
	solutions and PCB assembly
	</p>
    </div>
  
    <!-- Plantation Division -->
    <div style="width: 770px; height:270px; display: table-cell; background-color:#2ECC71;">
	<p style="text-align:center; font-size: 30px">Plantation Division</p>
	<center>
	<img src="plant.jpg" align="middle" style="width:250px; height:150px; text-align:center">
	</center>
	<p style="font-size=10px; text-align:center">
	The division with land bank totalling of 4, 300 acres located at Sabah state in Malaysia
	</p>
    </div>
    <!-- ------------------------------------------------------------------- -->

    </div>
    <h5 style="font-size:50px">end</h5>
    </div>


    </body>

    <footer style="background-color:lightgrey; font-size: 20px; 
    text-align:center; font-family: 'myFirstFont', italic;
	color: black;">
	Copyright &copy; 2020 All Rights Reserved, SCOPE Industries Berhad
    </footer>

“结尾”应该在页脚之上。 如果我以 100% 放大网页，它位于页脚下方。 如果我放大 80%，它位于页脚之上。

代码的第一部分是中间的2部分。 我需要向此页面添加另一部分，但不能。我的第一页也有同样的问题

Answer 1

当我在该页面上添加 header 时检查下面的代码，它显示正确!!

<header style="width: 100%;background-color:green ;">
  Text
</header>
<div style="width: 100%; display: table;">
    <div style="display: table-row">
    <!-- ------------------------------------------------------------------ -->
	<!-- Manufacturing Division -->
    <div style="width: 770px; height:450px; display: table-cell; background-color:#17202A ;">
	<p style="text-align:center; font-size: 30px; color:white">Manufacturing Division</p>
	<center>
	<img src="board.jpg" align="middle" style="width:250px; height:150px; text-align:center">
	</center>
	<p style="font-size=10px; text-align:center; color:white">
	With more than 20 years of expertise in Electronics Manufacturing, <br>
	we are happy to be your partner for your electronics manufacturing <br>
	solutions and PCB assembly
	</p>
    </div>
  
    <!-- Plantation Division -->
    <div style="width: 770px; height:270px; display: table-cell; background-color:#2ECC71;">
	<p style="text-align:center; font-size: 30px">Plantation Division</p>
	<center>
	<img src="plant.jpg" align="middle" style="width:250px; height:150px; text-align:center">
	</center>
	<p style="font-size=10px; text-align:center">
	The division with land bank totalling of 4, 300 acres located at Sabah state in Malaysia
	</p>
    </div>
    <!-- ------------------------------------------------------------------- -->

    </div>
    <h5 style="font-size:50px">end</h5>
    </div>


    </body>

    <footer style="background-color:lightgrey; font-size: 20px; 
    text-align:center; font-family: 'myFirstFont', italic;
	color: black;">
	Copyright &copy; 2020 All Rights Reserved, SCOPE Industries Berhad
    </footer>