如何让div标签获取满高度？左栏无法占满屏幕100%高度求助

左栏无法占满对应高度的核心原因是内部浮动元素未清除导致的父容器高度坍塌，和高度赋值规则本身无关：

• 左栏容器初始设置了100%高度属性，内部文章条目使用了浮动布局，但容器本身没有做清除浮动处理
• 当左栏内文章内容较少时，浮动元素总高度小于一屏高度，父容器设置的100%高度刚好能覆盖全部内容，视觉上显示正常
• 当左栏内文章内容较多、浮动元素总高度超过一屏时，父容器不会被未清除浮动的子元素撑开，只会保留初始的一屏高度，超出部分的内容会脱离父容器的背景范围，最终呈现出左栏没有占满高度的效果

以下方案二选一即可生效：

1. 最简便方案：给左栏容器增加overflow: hidden;属性，强制容器包裹内部所有浮动子元素，容器高度会自动适配内部内容长度，不会再出现高度不够的问题
2. 无裁切风险方案：如果担心overflow: hidden会意外裁切下拉菜单这类溢出内容，可以给左栏容器增加伪元素清除浮动规则，代码如下：

/* 请将选择器替换为左栏实际使用的CSS类名/ID */
.left-sidebar::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

• 前置校验项：确认页面的html、body标签已经设置了height: 100%，如果父级根元素没有设置高度，子元素的height: 100%规则本身就无法生效，标准基础设置代码如下：

html, body {
  height: 100%;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Gà con