Question

我很难找到解决我特殊困境的资源。

我想制作一个简单的横向型滚动条网站。这个网站只包含并排堆叠的图像，每个图像的浏览器屏幕高度均为100％。没有文字，菜单按钮等。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="margin:0; padding:0; overflow:scroll; height:100%;">
<div>
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/1.jpg" />
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/2.jpg" />
</div>

</body>
</html>

当组合图像宽度不与浏览器窗口的宽度重叠时，浮动工作，但是当我将图像样式高度设置为100％时，它们不会向左浮动，它们会相互叠加。

有没有办法让图像继续溢出到对方的右边？

似乎很疯狂，因为看起来应该很容易实现，我遇到了很多麻烦。

非常感谢您的期待，我真的希望这是可能的。

电子。

Answer 1

高度：CSS不能实现100％，因为height属性不是指浏览器视口，而是父元素的高度（在你的情况下是div或body）。正文再次不会扩展到浏览器视口，其高度将自动收缩到您的内容。

我会建议使用JavaScript来完成这项任务。它会为你节省很多PITA。

例如，使用jQuery，您可以执行类似

的操作

$(document).height() - $('body').offset().top 
$(window).height()

或使用“原生”JavaScript： http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/（这不是那么有趣......跨浏览器问题，一如既往......）。

高度：100％;漂浮：离开，有办法吗？

1 个答案: