如何设置DIV元素支持纵向滚动且高度不超过浏览器页面100%高度

开发者阿泽

2026-10-5

问题解决方案

核心原因

你之前设置的滚动不生效，本质是承载内容的容器没有固定的可参考高度：

ul、li两个父级容器都没有继承视口高度，会随内容自动撑开
.accslide 容器虽然设了height:100%，但父级li没有明确高度，这个属性无法生效，自然也不会触发内部滚动
浮动布局会导致高度塌陷，进一步加剧高度计算异常

需修改的代码

1. CSS部分调整

找到对应选择器，替换为以下规则：

/* LIST */
ul {
  list-style: none;
  margin: 0px;
  height: 100%; /* 新增，继承body的100%视口高度 */
  display: flex; /* 新增，替代浮动解决高度塌陷问题 */
}

li {
margin: 0px;    
height: 100%; /* 新增，继承ul的高度 */
display: flex; /* 新增，内部元素横向排列 */
}

/* SLIDES */
.accslide {
  display: block;
  height: 100%;
  width: 0px;
  /* 删除原有float: left;属性 */
  overflow-x: hidden;
  overflow-y: auto; /* 新增，内容超出时自动显示纵向滚动条 */
  font-size: 14px;
  line-height: 1.5;
  -moz-transition: all 700ms ease;
  -o-transition: all 700ms ease;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
}