如何调整div尺寸适配所有内容，解决内容溢出边框被截断问题

你给div设置了固定的height: 100%，这个百分比值会继承父元素（也就是body）的高度，而你设置的body { height: 100% }默认等于浏览器初始视口的高度，当div内的内容超出这个高度后，div的高度不会自动延展，就会出现内容溢出、边框被截断的问题。

按以下步骤修改CSS即可实现div随内容自动扩展：

• 给html根元素添加height: 100%声明，百分比高度需要逐级继承，缺少html的高度设置的话，body的100%高度不会生效
• 把body的height: 100%改为min-height: 100%，让页面可以随内容自适应高度
• 把.middle的height: 100%改为min-height: 100%，让div的最小高度为视口高度，内容超出时自动延展
• 把.middle的top:74px改为margin-top:74px，相对定位的top偏移只会视觉移动元素，不会改变元素实际占位，容易出现底部溢出问题，用margin调整位置更符合常规文档流逻辑，新手更不容易踩坑
• 可选添加box-sizing: border-box声明，让宽高计算自动包含边框和内边距，避免额外撑大元素

/* 新增html的高度声明 */
html {
  height: 100%;
}

body {
  background-color: #ffffff;
  min-height: 100%; /* 把height改为min-height */
  margin: 0; /* 清除浏览器默认的body边距，避免布局错位 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

.middle {
  min-height: 100%; /* 把height改为min-height */
  width: 75%;
  border: 2px solid black;
  position: relative;
  margin-top: 74px; /* 把top改为margin-top */
  margin: auto;
  box-sizing: border-box; /* 可选，避免边框撑大元素尺寸 */
}

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