Question

我正在为朋友网站制作网页。你可以在这里找到它：

我的问题如下：

我的身体div下方有一个巨大的空白空间，而且没有明显原因的分区名称lower_body也很大（至少对于我的眼睛来说：P）
使用Chrome时，下页中的图库部分定位不正确 - 意味着只是在YouTube视频和显示日期之后（我在firefox显示屏上没有相同的问题）。
< / LI>
有人可以提供帮助。

你需要我发布我的CSS和HTML代码吗？

Answer 1

在你的样式表中有一个名为lower_content的seloctor。请找到这个类并用这个块替换你的块。由于此处使用了不必要的底部空间，因此会出现空白空间。

.lower_content {
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 80px;
right: 30px;
z-index: 2;
}

Answer 2

检查bottom高度，它们离开了，就像.lower_content底部有680px一样，是大的。而是使用较小的边距底部，并确保在浮动后清除它们

Answer 3

你需要刷新你的CSS。您的底部空白区域是与身体相关的边缘问题，对于您的图库，您说它，它没有正确定位，因此您有一个跨浏览器兼容性问题，可能就像添加浏览器特定的css标记一样简单，或者只需在画廊部分重新调整边距/填充。

Answer 4

使用相对定位来重叠元素。这会改变元素的显示位置，但它仍会占用空间而没有相对位移。这就解释了为什么页面底部有一个大的空白区域。而是使用具有position:relative但没有位移的容器，并使用其中包含position:absolute的元素来覆盖它们。

lower_content和gallery元素不足以包含gallery_text元素，因此它会突出显示在它们下方。这可能是导致身体元素下方的额外白色空间的原因，即在相对位移之前的原始位置将在身体元素之外。

此外：

你在body元素上有margin:0，但你也应该有padding:0，因为有些浏览器（即Opera）使用填充作为正文的默认填充而不是边距。

body元素中有一个style元素，它应该位于head元素中。这不太可能导致任何问题，但根据标准把它放在应该的位置更安全。