屏幕缩放时#headline容器内button与#pagination元素消失问题求助

AI 小北

2026-7-18

问题：响应式布局下#headline内的button和#pagination无法正常显示

我有一个包含#content、button和#pagination的#headline容器，在调整屏幕宽度（比如手机横竖屏切换）时，容器内的button和#pagination元素无法正常显示。我已经给容器及其内部的#content、button、#pagination元素添加了红色边框，相关代码如下：

原始CSS代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

#headline {
  width: 50%;
  float: left;
  color: floralwhite;
  height: 100vh;
}

#solarsystem {
  width: 50%;
  float: left;
  height: 100vh;
  position: relative;
}

#headline #content {
  margin: 6rem 5rem;
  border-left: 1rem solid white;
}

#headline #content h1 {
  font-size: 5rem;
  margin-left: 3rem;
  margin-bottom: 1rem;
  text-indent: 5px;
}

#headline #content p {
  text-indent: 10px;
  margin-left: 3rem;
}

button {
  padding: 1rem 1rem;
  font-size: 12px;
  color: white;
  border: 1px solid white;
  display: inline-block;
  margin-left: 8rem;
  background: transparent;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  transition: width 0.3s;
  z-index: -1;
}

button:hover:before {
  width: 100%;
}

button:hover {
  color: black;
}

#pagination {
  margin-top: 8rem;
  margin-left: 8rem;
  display: inline-block;
}

#pagination a {
  padding: 10px 10px;
  color: white;
  text-decoration: none;
}

#pagination a:hover {
  background: white;
  color: black;
}

#pagination a#active {
  background: white;
  color: black;
}

body {
  width: 100vw;
  height: 100vh;
  background: black;
}

#sun {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  border: 1 solid red;
  background: yellow;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  outline: 1px solid white;
  outline-offset: 1.5rem;
}

#mercury {
  position: absolute;
  z-index: 98;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border: 1px solid black;
  background: gray;
  border-radius: 50%;
  animation: orbitmercury 2s linear infinite;
}

#venus {
  position: absolute;
  z-index: 98;
  top: calc(50% - 0.75rem);
  left: calc(50% - 0.75rem);
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid orange;
  background: red;
  border-radius: 50%;
  animation: orbitvenus 3.5s linear infinite;
}

#orbitv {
  position: absolute;
  z-index: 1;
  width: 12rem;
  height: 12rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#earth {
  position: absolute;
  z-index: 98;
  top: calc(50% - 1.25rem);
  left: calc(50% - 1.25rem);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid white;
  background: linear-gradient(270deg, skyblue, lime);
  border-radius: 50%;
  animation: orbitearth 5s linear infinite;
}

#orbite {
  position: absolute;
  z-index: 1;
  width: 18rem;
  height: 18rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mars {
  position: absolute;
  z-index: 98;
  top: calc(50% - 1.1rem);
  left: calc(50% - 1.1rem);
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid orange;
  border-radius: 50%;
  animation: orbitmars 6s linear infinite;
  background: red;
}

#orbitm {
  position: absolute;
  z-index: 1;
  width: 32rem;
  height: 32rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes orbitmercury {
  from {
    transform: rotate(0deg) translate(4rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(4rem) rotate(0deg);
  }
}

@keyframes orbitvenus {
  from {
    transform: rotate(0deg) translate(6rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(6rem) rotate(0deg);
  }
}

@keyframes orbitearth {
  from {
    transform: rotate(0deg) translate(9rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(9rem) rotate(0deg);
  }
}

@keyframes orbitmars {
  from {
    transform: rotate(0deg) translate(16rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(16rem) rotate(0deg);
  }
}

@media screen and (max-width: 720px) {
  body {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  #headline {
    width: 100%;
    margin: 5rem 0;
    border: 5px solid red;
  }
  #headline #content {
    margin: 6rem 2rem;
  }
  #headline button {
    margin: 1rem auto;
    border: 1px solid red;
  }
  #headline #pagination {
    margin: 2rem auto;
    border: 1px solid red;
  }
  #headline #pagination a {
    display: inline-block;
  }
  #solarsystem {
    width: 100%;
    overflow: hidden;
    margin-top: 30rem;
  }
}

原始HTML代码

<div id="headline">
  <div id="content">
    <h1> Sol System</h1>
    <p> The Solar System is the gravitationally bound system of the Sun and the objects that orbit it. The largest of such objects are the eight planets, in order from the Sun: four terrestrial planets named Mercury, Venus, Earth and Mars and 4 more other
      planets.
  </div>
  <button> Learn More </button>
  <br>
  <div id="pagination">
    <a href=""> &laquo; </a>
    <a href="" id="active"> 1 </a>
    <a href=""> 2 </a>
    <a href=""> 3 </a>
    <a href=""> 4 </a>
    <a href=""> 5 </a>
    <a href=""> 6 </a>
    <a href=""> &raquo; </a>
  </div>
</div>

<div id="solarsystem">
  <div id="sun">
  </div>

  <div id="mercury">
  </div>

  <div id="venus">
  </div>
  <div id="orbitv"></div>

  <div id="earth">
  </div>
  <div id="orbite"></div>


  <div id="mars">
  </div>
  <div id="orbitm"></div>
</div>

问题原因及解决方案

核心问题

#headline固定高度导致内容溢出：桌面端设置了height:100vh，移动端未修改该属性，当容器内内容总高度超过视口高度时，超出部分会被隐藏，导致button和pagination无法显示。
inline-block元素margin:auto不生效：button和pagination是inline-block类型，margin:auto无法实现居中，且原有桌面端的margin-left:8rem在小屏幕下会导致元素超出容器。

修改方案

调整CSS代码，主要修改以下部分：

/* 移除#headline的固定高度，改用最小高度确保占满视口同时允许内容扩展 */
#headline {
  width: 50%;
  float: left;
  color: floralwhite;
  min-height: 100vh;
}

/* 移动端媒体查询内的修改 */
@media screen and (max-width: 720px) {
  body {
    overflow-y: scroll;
    overflow-x: hidden;
    height: auto; /* 移除body固定高度，允许内容滚动 */
  }
  #headline {
    width: 100%;
    margin: 5rem 0;
    border: 5px solid red;
    min-height: auto; /* 移动端不需要强制占满视口 */
  }
  #headline #content h1 {
    font-size: 3rem; /* 缩小标题字号，适配小屏幕 */
  }
  #headline button {
    margin: 1rem auto;
    border: 1px solid red;
    display: block; /* 设置为block元素，让margin:auto生效实现居中 */
  }
  #headline #pagination {
    margin: 2rem auto;
    border: 1px solid red;
    display: block; /* 设置为block元素，让margin:auto生效实现居中 */
    text-align: center; /* 让内部分页按钮居中对齐 */
  }
  #solarsystem {
    width: 100%;
    overflow: hidden;
    margin-top: 5rem; /* 减小顶部间距，避免空白过大 */
    min-height: 100vh; /* 确保太阳系部分占满视口 */
  }
}

修改后效果

#headline高度自适应内容，不会裁切button和pagination元素
移动端button和pagination自动居中，不会超出容器范围
标题字号适配小屏幕，避免内容溢出
太阳系部分间距更合理，整体布局流畅自然

内容的提问来源于stack exchange，提问作者ImAWeebキズネです

屏幕缩放时#headline容器内button与#pagination元素消失问题求助

原始CSS代码 #

原始HTML代码 #

问题原因及解决方案 #

核心问题 #

修改方案 #