如何用HTML/CSS让页面主体适配窗口并实现内部容器滚动？

要实现容器内部滚动且整页不超出视口，需调整html、body及目标容器的样式，核心是确保父级高度正确并处理默认样式、盒模型的影响，具体修改如下：

关键调整要点 #

• 重置html和body的默认边距，同时设置高度为100%，让body完全占满浏览器视口
• 给目标容器.div-1添加box-sizing: border-box，避免边框额外增加元素总高度导致溢出
• 将容器的min-height:100%改为height:100%，配合overflow:auto实现内容超出时内部滚动

修改后的完整CSS代码 #

<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: blue;
    background-image: url("example.com");
    color: white;
    font-size: 15px;
  }
  .div-1 {
    background-image: url("example.com");
    height: 100%;
    width: 68%;
    border: 16px double purple;
    box-sizing: border-box;
    word-break: normal;
    overflow: auto;
    font-family: monospace;
    position: relative;
    display: block;
  }
  a:link {
    color: #9999ff;
    text-decoration: none;
  }
  a:visited {
    color: #7777ff;
    text-decoration: none;
  }
  a:hover {
    color: #8888ff;
    text-decoration: underline overline;
  }
  a:active {
    color: #ff8888;
    text-decoration: underline overline;
  }
  hr.hr1 {
    border: 1px dotted dimgrey;
  }
  h4 {
    display: inline;
  }
</style>

补充说明 #

• box-sizing: border-box会让元素的边框、内边距都包含在设置的宽高范围内，不会因边框导致元素总高度超出父级
• overflow:auto比overflow:scroll更友好，仅当容器内内容高度超过容器高度时才显示滚动条
• 若body内除.div-1外还有其他元素（如头部导航），可给body设置display:flex; flex-direction:column，再给.div-1设置flex:1，让容器自动填充剩余空间

内容的提问来源于stack exchange，提问作者jan Kanon Pelikelon