联系人作品集应用：点击Add按钮后页面顶部内容截断问题求助

我帮你排查了下，你遇到的页面顶部内容截断问题，主要是body的固定高度限制和不规范的元素布局导致的，咱们一步步来修复：

1. 修复body的高度限制问题 #

你原来给body设置了height:100vh，这会让body高度固定为当前视口高度。当点击Add按钮新增联系人模块后，总内容高度超过视口高度时，flex居中的布局会让顶部内容被挤出视口外（因为容器高度固定，内容只能在这个范围内居中，溢出部分会被隐藏）。

修改body的CSS：

body{
 display: flex;
 justify-content: center;
 align-items: flex-start; /* 从居中改成顶部对齐，避免内容溢出时顶部被截 */
 gap: 10px;
 flex-direction: column;
 min-height: 100vh; /* 替换height为min-height，保证页面至少占满视口，内容多了自动扩展 */
 padding-top: 20px; /* 加个顶部内边距，避免内容贴顶 */
}

2. 清理混乱的元素嵌套和冗余样式 #

你的HTML结构有几个不符合规范的地方，也是布局混乱的诱因：

• <div id="duplicater0">直接放在<ul>里，ul的直接子元素必须是<li>，这会导致浏览器渲染异常
• li里嵌套了<script>标签，每次复制都会重复引入脚本，可能引发JS冲突
• li的margin: 0px 300px 405px过大，导致条目间距异常；ul的width:200%完全没必要

修改后的核心HTML结构：

<body>
 <ul id="sortable" style="border:3px solid transparent; background-color: #E9E395; padding: 1em; width: fit-content;">
   <!-- 把duplicater容器放到li内部，符合ul-li的规范 -->
   <li class="ui-state-default" id="duplicater0">
     <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
     <input type="file" id="image_input" accepts="image/png, image/jpg">
     <div id="display_image"></div>
     <form>
       <textarea style="border:3px; font-family: 'Times New Roman', Times, serif; text-align: left" rows="1" cols="15" name="first-name">First Name</textarea>
       <textarea style="border:3px; font-family: 'Times New Roman', Times, serif;" rows="1" cols="15" name="last-name">Last Name</textarea>
     </form>
     <form>
       <textarea style="border:3px; text-align: left; font-family: 'Times New Roman', Times, serif;" rows="1" cols="15" name="phone">Phone #</textarea>
       <span style="color: #B8B8B8; font-size: medium; font-family:serif"><b>Text</b> | <b>Call</b></span>
     </form>
     <form>
       <textarea style="border:3px; font-family: 'Times New Roman', Times, serif; text-align: left" rows="1" cols="15" name="occupation">Occupation</textarea>
     </form>
     <button onclick="duplicate()">Add</button>
     <p id="demo"></p>
   </li>
 </ul>
 <!-- 把script移到body末尾，避免被重复复制 -->
 <script src="script.js"></script>
</body>

同时调整li的样式：

#sortable li {
 margin: 0 0 20px 0; /* 只保留底部间距，去掉过大的左右/上下边距 */
 padding: 1em;
 padding-left: 1.5em;
 font-size: 1.4em;
 min-height: 200px; /* 给li设置最小高度，避免内容挤在一起 */
 position: relative;
}

3. 修复duplicate函数的细节问题 #

原来的复制函数会生成多个相同id的元素（比如image_input、display_image），导致JS选择器失效，而且新复制的图片上传按钮没有绑定事件。修改后的函数：

var i = 0;
function duplicate() {
 var original = document.getElementById('duplicater' + i);
 var clone = original.cloneNode(true);
 i++;
 clone.id = "duplicater" + i;
 
 // 重置克隆元素里的图片输入和显示区
 const cloneImageInput = clone.querySelector("#image_input");
 cloneImageInput.id = "image_input_" + i;
 const cloneDisplayImage = clone.querySelector("#display_image");
 cloneDisplayImage.id = "display_image_" + i;
 cloneDisplayImage.style.backgroundImage = ""; // 清空背景图
 
 // 给新的图片输入绑定上传事件
 cloneImageInput.addEventListener("change", function(){
  const reader = new FileReader();
  reader.addEventListener("load", () => {
   const uploaded_image = reader.result;
   cloneDisplayImage.style.backgroundImage = `url(${uploaded_image})`
  });
  reader.readAsDataURL(this.files[0]);
 });
 
 original.parentNode.appendChild(clone);
}

做完这些修改后，点击Add按钮新增模块时，页面会自动向下扩展，顶部内容不会再被截断，同时布局也会更规范稳定。

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