html/css中的内容溢出正文

我在学习css时写了一个示例页面。但是我发现我的

div

s中有2个溢出

body

内容，而

footer

在

div

之上

正文{
背景色：白色；
}
#第一组{
利润率：50像素；
文本对齐：对齐；
宽度：40%；
位置：绝对位置；
左：150px；
顶部：400px；
}
#第二组{
利润率：50像素；
宽度：35%；
位置：绝对位置；
左：800px；
顶部：400px；
}
#第三组{
位置：相对位置；
宽度：100%；
高度：200px；
顶部：500px；
背景色：黑色；
颜色：白色；
}
页脚{
背景色：黑色；
颜色：白色；
宽度：100%；
位置：绝对位置；
底部：0；
溢出：隐藏；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。是的

我能为您提供的帮助：

如果你是一家关心创造卓越用户体验的公司或机构，并且希望有人帮助你建立一个快速、可访问且符合标准的响应性网站或应用程序，我可以提供帮助

证明信

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机使用了galle

Lorem Ipsum只是印刷和排版行业的虚拟文本。知识产权

这是因为您已将它们定位为绝对值，并且由于没有#div4，因此不再有相对父项。默认情况下，Div是块，如果删除块上的“位置”属性，它们应该正常换行

---

如果你想隐藏整个页面，你应该把溢出放在正文上。

你到处都在使用

position:absolute

，你不需要它。例如，使用

内联块

正文{
背景色：白色；
保证金：0；
}
.分区{
利润率：5%；
显示：内联块；
垂直对齐：顶部
}
.w40{
文本对齐：对齐；
宽度：40%
}
.w35{
宽度：35%
}
{}页脚{
背景色：黑色；
颜色：白色；
宽度：100%；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。是的

我能帮你做什么：

Lorem Ipsum仅仅是th的虚拟文本
Lorem Ipsum仅仅是th的虚拟文本
Lorem Ipsum仅仅是th的虚拟文本

证明信

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机使用了galle

Lorem Ipsum只是印刷和排版的虚拟文本

我不是100%确定你在尝试什么，但你滥用了绝对位置。您确实需要小心使用它，因为当您使用绝对位置时，它会影响文档的高度和宽度。您很可能希望使用

float:left

，但这有时也很棘手。例如，如果你使用手机，它的行为方式就不同了

CSS需要大量的时间和计划来确保你做正确的事情。查看下面的代码，看看提供的代码是否有帮助

我将

float:left

添加到

#div1、#div2

html{
身高：100%：
宽度：100%；
}
身体{
背景色：白色；
身高：100%；
宽度：100%；
}
#第一组{
利润率：50像素；
文本对齐：对齐；
宽度：40%；
浮动：左；
}
#第二组{
利润率：50像素；
宽度：35%；
浮动：左；
}
页脚{
背景色：黑色；
颜色：白色；
宽度：100%；
位置：绝对位置；
底部：0；
溢出：隐藏；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。是的

我能为您提供的帮助：


Lorem Ipsum仅仅是th的虚拟文本
Lorem Ipsum仅仅是th的虚拟文本
Lorem Ipsum仅仅是th的虚拟文本


证明信

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机使用了galle

Lorem Ipsum只是印刷和排版行业的虚拟文本。知识产权

之所以会发生这种情况，是因为您将

位置：绝对

与

顶部：400px

一起使用，并且它会下降到低于身体高度的位置（它甚至没有合适的高度，因为那里有静态元素）。

---

在您的示例中，如果您只是从所有元素（div和footer）中删除

position:absolute

，它看起来会很好。您可以使用

左边距

代替

左边距

进行定位

改变了。谢谢如何处理div溢出？您希望的前景是什么？为什么要使用绝对定位的所有元素进行编码？我建议使用静态定位。万一您已经需要绝对定位，请尝试使用