使用CSS和PHP开发网页时新增元素被推至页面底部该如何解决

你遇到的新元素全部被推到页面底部的核心原因是CSS全局通配符规则设置错误：你给所有元素统一设置了height: 100%，这会强制h1、p、a等所有页面元素都占据和当前视口等高的空间，每个元素默认占满一整屏，后续元素自然只能排列到前一个元素的下方，也就出现了需要滚动才能找到新内容的问题。

按以下步骤修改即可解决问题：

• 删除通配符*选择器里的height: 100%规则，如果你需要让页面根节点占满视口高度，单独给html和body标签设置即可，不要全局应用该规则。
• 删掉p标签你手动添加的margin-top: -740负边距，同时删掉h1、p标签中设置的line-height: 0px，行高为0会导致文本重叠、排版异常，可根据显示需求设置为1.2-1.5倍字号的数值即可。
• 你当前的footer使用position: absolute定位，会固定悬浮在视口底部，后续页面内容超过一屏高度时会被footer遮挡，建议改为position: relative，或者使用flex布局实现粘性footer效果。
• 修正现有代码的小错误：CSS中list-syle: none拼写错误，正确为list-style: none；HTML中a标签缺少闭合标记，正确写法为<p> No Account?<a href="register.php">Register here!</a></p>。

修改后的核心CSS参考：

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500&display=swap');
* {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

h1 {
  color: white;
  font-family: 'Urbanist', sans-serif;
  font-size: 30px;
  margin: 20px 0 10px 0;
}

p {
  color: white;
  font-family: 'Urbanist', sans-serif;
  font-size: 20px;
  margin-bottom: 15px;
}

body {
  padding: 0;
  margin: 0;
  background-color: #4a69bd;
}

header {
  height: 60px;
  background-color: #1e3799;
}

ul {
  float: right;
  right: 30%;
}

ul li {
  display: inline;
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: white;
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  padding: 0px 0px 0px 20px;
}

footer {
  position: relative;
  bottom: 0%;
  width: 100%;
  height: 60px;
  background-color: #1e3799;
  text-align: center;
  margin: 0 auto;
}

footer p {
  color: white;
  font-family: 'Urbanist', sans-serif;
}

内容的提问来源于stack exchange，提问作者jamiebaudel