CSS布局：div内容截断及wrapper背景未铺满页面问题求助

嘿，好久没写CSS确实容易手生，我来帮你拆解这俩问题，给你几个靠谱的解决方向：

一、div内容被截断的问题 #

这种情况常见的原因和解决方法如下：

• 检查固定高度设置：如果你给那个div加了height: xxxpx或者height: 100%，当内容超过这个高度时就会被截断。试试把height换成min-height，这样元素会根据内容自动撑开，不会截断内容。
• 查看overflow属性：如果你的div设置了overflow: hidden，超出部分会被隐藏。如果不需要截断，改成overflow: visible；如果需要滚动，就用overflow: auto。
• 确认clearfix是否生效：你提到用了clearfix但没用，可能是写法不对。试试标准的clearfix代码，给包含浮动元素的父div加上这个类：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

记得要把这个类加到包含浮动元素的父容器上，而不是浮动元素本身哦。

二、wrapper背景无法铺满整个页面的问题 #

你已经给html和body设了100%高度，但还是有问题，可能是这些原因：

• 用min-height替代height：如果给wrapper设了height: 100%，当页面内容超过一屏时，背景就只会覆盖第一屏的高度。改成min-height: 100%，这样背景会跟着内容一起延伸。
• 浮动元素导致高度塌陷：如果wrapper里有浮动元素，即使加了clearfix，也要确保clearfix正确应用到wrapper上。或者试试用flex布局来彻底解决高度塌陷问题：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1; /* 让wrapper自动占满body的剩余空间 */
  background-color: #你的背景色;
}

这种flex的写法不仅能让背景铺满页面，还能避免浮动带来的各种问题，现在很多项目都用这种方式布局啦。

如果还有问题，可以把完整的wrapper代码贴出来，我再帮你细化排查～

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