新手求助：移动端网页内容溢出排版错乱问题

问题 #

刚完成网页基础课程，首次制作个人主页，PC/笔记本端显示正常，但移动设备上内容互相重叠溢出。已添加<meta name="viewport" content="width=device-width, initial-scale=1">标签但无效，怀疑是nav和article的固定宽高导致，但移除这些属性会彻底打乱页面布局。网站代码如下：

原CSS代码 #

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}  
.bg-image {
opacity: 0.5;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


header {
  background-color: #1434A4;
  background-image: linear-gradient(#06202d, #010203);
  padding: 1px;
  text-align: center;
  font-size: 35px;
  color: white;
}

h2 {
  color: #19aef6;
  font-family: helvetica;
}

h1 {
border: 1px solid #19aef6;
    border-radius: 4px;
    padding: 10px;
    background: #010203;
}

h6 {
  color: #19aef6;
  font-family: helvetica;
}


nav {
  float: left;
  width: 25%;
  height: 1000px;
  background: #010203;
  padding: 20px;
  color: #19aef6;
}

details {
    border: 1px solid #19aef6;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
    background: #010203;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}


details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid #19aef6;
    margin-bottom: 0.5em;
}

p {
  border: 1px solid #19aef6;
    border-radius: 4px;
    padding: 10px;
    background: #010203;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  background-image: url("https://i.imgur.com/BNYZB07.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-opacity: 0.5;
  float: left;
  padding: 20px;
  height: 1000px;
  width: 75%;
  background-color: #010203;
  color: #19aef6;
}


section::after {
  content: "";
  display: table;
  clear: both;
}


footer {
  background-color: #010203;
  padding: 25px;
  text-align: center;
  color: #19aef6;
  overflow: hidden;
}

.businesscard {
}

img {
        width: 100%;
        height: 100%;
      }

a:link {
  color: #68acce;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #68acce;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<header>
  <h2>M VICE</h2>
  <h6>About Me</h6>
</header>

<section>
  <nav>
 
 <details>
    <summary>Contact</summary>
    Discord: @m_vice <br>
    Email: mviceprivate@yahoo.com
 </details>
  <br>
  <details>
    <summary>Setup</summary>
    <a href="setup.html">Full Setup</a>
  </details>
  <br>
  <div class="businesscard">
  <details>
    <summary>Contact Card</summary>
    <img src="https://i.imgur.com/KbVR10F.png" alt="Business Card" object-fit="cover">
  </details>
  </div>

  </nav>
  
  <article>
    <h1>Welcome to my Homepage</h1>
    <p>I go by the username "M VICE", or simply, vice, and I come from Germany, yet my family is Polish.<br>I am glad to have you here, let me introduce myself to you.<br><br>I do a lot of things, but I spend most of my time gaming, coding, drawing, or tinkering with my stuff, but nothing too complicated<br><br>
    About gaming, I play a lot of shooters, mostly casually but in some cases also competetively, like in valorant or csgo. I stopped playing those games lately though, so I focus more on not-so-sweaty games like casual Modern Warfare 2, Cyberpunk 2077, DOOM Eternal, and some other titles<br><br>
    I don't code a lot, I am actually still taking courses, but I can do some magic here and there, like this website (pretty proud of this one)<br>My goal for the future is to get a Masters Degree in Medical Informatics, so I'm prolly (and hopefully) going to get better and better<br>
    Come check this website out every now and then if you want to see my progress, won't be often but I'm planning to make this website a bit more fancy once I get the knowledge and experience to do so<br><br>
    And about drawing? Well I haven't made anything new in a long time due to a very poorly planned out and overflowing schedule with things to do, but I did do a couple things, like the background of this page or the Icon on my Contact Card on the left. I also draw my own characters, for which I'll make a new section here in the future<br><br>
    I also build custom keyboards for a while now, you can read about them in my <a href="setup.html">full list containing the things I have in my setup</a>. Technically I can also build custom keyboards for other people, but that's on a friendly basis</p>
    <p>I also do a lot more things, like listening to music, swimming, reading (a lot) of books, and more. I also plan to join a fencing club once I have more time!<br><br>I love talking about everything, if you want to talk to me, dms on discord are always open whether I know you or not<br><br>Seeya!</p>
</section>

<footer>
  <p>Thanks for reading!</p>
</footer>

</body>
</html>

针对性修复方案 #

问题核心是固定高度+浮动布局在小屏设备上的适配失效，以下是直接可用的修改方案：

1. 核心CSS修改（替换浮动为Flex，移除固定高度，添加媒体查询） #

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* 移除max-height:100%，避免内容被截断 */
}  

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: #1434A4;
  background-image: linear-gradient(#06202d, #010203);
  padding: 1px;
  text-align: center;
  font-size: 35px;
  color: white;
}

h2 {
  color: #19aef6;
  font-family: helvetica;
}

h1 {
  border: 1px solid #19aef6;
  border-radius: 4px;
  padding: 10px;
  background: #010203;
}

h6 {
  color: #19aef6;
  font-family: helvetica;
}

/* 修改section为flex容器，替代浮动布局 */
section {
  display: flex;
  flex-wrap: wrap; /* 自动换行适配小屏 */
}

nav {
  /* 移除float和固定height */
  width: 25%;
  min-height: auto; /* 让内容撑开高度 */
  background: #010203;
  padding: 20px;
  color: #19aef6;
}

details {
  border: 1px solid #19aef6;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  background: #010203;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #19aef6;
  margin-bottom: 0.5em;
}

p {
  border: 1px solid #19aef6;
  border-radius: 4px;
  padding: 10px;
  background: #010203;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  background-image: url("https://i.imgur.com/BNYZB07.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 移除float和固定height */
  padding: 20px;
  width: 75%;
  min-height: auto; /* 让内容撑开高度 */
  background-color: #010203;
  color: #19aef6;
}

/* 移除原来的clearfix，因为flex不需要 */
/* section::after {
  content: "";
  display: table;
  clear: both;
} */

footer {
  background-color: #010203;
  padding: 25px;
  text-align: center;
  color: #19aef6;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto; /* 让图片自适应宽度，避免拉伸变形 */
  object-fit: cover;
}

a:link {
  color: #68acce;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #68acce;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

/* 添加媒体查询，适配移动设备 */
@media (max-width: 768px) {
  nav, article {
    width: 100%; /* 移动端垂直排列，宽度占满屏幕 */
  }
  header {
    font-size: 28px; /* 缩小标题字体适配小屏 */
  }
}

2. HTML修改（将CSS嵌入到head的style标签中） #

<!DOCTYPE html>
<html lang="en">
<head>
<title>M VICE - About Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 上面修改后的CSS代码粘贴到这里 */
</style>
</head>
<body>

<header>
  <h2>M VICE</h2>
  <h6>About Me</h6>
</header>

<section>
  <nav>
    <details>
      <summary>Contact</summary>
      Discord: @m_vice <br>
      Email: mviceprivate@yahoo.com
    </details>
    <br>
    <details>
      <summary>Setup</summary>
      <a href="setup.html">Full Setup</a>
    </details>
    <br>
    <div class="businesscard">
      <details>
        <summary>Contact Card</summary>
        <img src="https://i.imgur.com/KbVR10F.png" alt="Business Card">
      </details>
    </div>
  </nav>
  
  <article>
    <h1>Welcome to my Homepage</h1>
    <p>I go by the username "M VICE", or simply, vice, and I come from Germany, yet my family is Polish.<br>I am glad to have you here, let me introduce myself to you.<br><br>I do a lot of things, but I spend most of my time gaming, coding, drawing, or tinkering with my stuff, but nothing too complicated<br><br>
    About gaming, I play a lot of shooters, mostly casually but in some cases also competetively, like in valorant or csgo. I stopped playing those games lately though, so I focus more on not-so-sweaty games like casual Modern Warfare 2, Cyberpunk 2077, DOOM Eternal, and some other titles<br><br>
    I don't code a lot, I am actually still taking courses, but I can do some magic here and there, like this website (pretty proud of this one)<br>My goal for the future is to get a Masters Degree in Medical Informatics, so I'm prolly (and hopefully) going to get better and better<br>
    Come check this website out every now and then if you want to see my progress, won't be often but I'm planning to make this website a bit more fancy once I get the knowledge and experience to do so<br><br>
    And about drawing? Well I haven't made anything new in a long time due to a very poorly planned out and overflowing schedule with things to do, but I did do a couple things, like the background of this page or the Icon on my Contact Card on the left. I also draw my own characters, for which I'll make a new section here in the future<br><br>
    I also build custom keyboards for a while now, you can read about them in my <a href="setup.html">full list containing the things I have in my setup</a>. Technically I can also build custom keyboards for other people, but that's on a friendly basis</p>
    <p>I also do a lot more things, like listening to music, swimming, reading (a lot) of books, and more. I also plan to join a fencing club once I have more time!<br><br>I love talking about everything, if you want to talk to me, dms on discord are always open whether I know you or not<br><br>Seeya!</p>
  </article>
</section>

<footer>
  <p>Thanks for reading!</p>
</footer>

</body>
</html>

修改说明 #

• Flex布局替代浮动：flex容器会自动调整子元素的排列，避免浮动导致的重叠问题，同时支持自动换行。
• 移除固定高度：让nav和article的高度由内容决定，避免内容溢出或空白过多。
• 媒体查询适配小屏：在屏幕宽度小于768px时，将侧边栏和内容区改为垂直排列，占满整个屏幕宽度，同时缩小标题字体提升可读性。
• 图片自适应：将图片高度改为auto，避免在小屏上拉伸变形。

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