页面的固定部分：页眉、内容和页脚答案

【问题标题】：Fixed Parts of page: Header, Content and Footer页面的固定部分：页眉、内容和页脚
【发布时间】：2023-03-17 17:49:02
【问题描述】：

我需要 3 个部分：页眉、内容和页脚固定位置。

<body>

<div id="header">
  <div id="info">
    <span id="fa">test</span>
    <br>
    <span id="en">Honey Koohpayeh Official Website</span>
  </div>
</div>


<div id="section">
  <div class="img-holder">
    <img class="img" src="img/img1.jpg" />
  </div>
</div>

<div id="footer">
  Copyright © W3Schools.com
</div>

</body>

CSS：

#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#section {
  padding:10px;
  text-align: center;
}
#footer {
  background-color:black;
  color:white;
  clear:both;
  text-align:center;
  padding:5px;
}

我正在使用具有两张图片的 java 脚本，其中一张图片首先加载，然后显示 loading.gif，然后显示第二张图片。问题是当我显示加载，然后显示第二张图片时，内容变空了几秒钟，我的页脚到达了页眉。我需要三个部分固定位置，没有什么可以改变它们的高度。我想像页眉和页脚一样使用 % 获得 20%，而内容获得其余部分。

【问题讨论】：

标签： html header footer

【解决方案1】：

一种选择是在加载图像时设置固定的高度和宽度，并在接收到图像时将其删除。

【讨论】：

感谢您的建议。怎么样？