Question

我一直在使用基于twitter bootstrap的模板。对于着陆页底部的图像，由于某种原因，会出现一个额外的滚动条，然后导致底部投资组合中的图像显示为裁剪或部分加载。

不确定html或css的哪一位导致此问题，因为原始模板中似乎没有出现问题。我检查并将我的代码与原始代码进行了比较，但无法弄清楚是什么导致了它。

我从原版中删除了很多代码，因为我不需要太多代码。我只想要一个简单的主页，但无法确定导致额外滚动条或溢出效果的原因。

以下是页面链接，如果有人有任何想法：http://krmmalik.com/photography/

Answer 1

我在Chrome开发工具中看到了这一点：

<div class="house" id="house0" style="height: 268px; width: 1726px; overflow-y: scroll; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">

设置修复height，然后当项目使用overflow-y:scroll;属性降低到该高度以下时，会导致第二个滚动条。

但是，这不在您文档的View Source中！如果您碰巧知道它来自何处，摆脱这个问题是解决问题的关键。

如果您可以控制它，可以尝试将其更改为：

<div class="house" id="house0" style="min-height: 268px; width: 1726px; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">

这应该做的是让它永远不会短于268px，同时允许它扩展到一个新的高度，如果需要的话。我说应该因为我没有测试过它！

Answer 2

对Ascensor.js的引用正在破坏网站并将所有丑陋的内联CSS添加到正文中。我不知道它应该诚实地做什么，但它现在正在打破事情。我在你的网站上禁用了js并重新加载它，一切正常。

布局没有响应，因为它只是一个流畅的布局。它没有诚实地调整大小。我希望它不是非常昂贵。你改变的那个或那些东西打破了它应该如何调整大小。

我会尝试找出该脚本应该做什么，但在此期间只需删除引用，您的网站似乎正确加载。

Answer 3

这是你犯了愚蠢的错误。只需删除overflow-x: hidden; and overflow-y: scroll;和您的代码就可以了。

  <div id="house0" class="house" style="width: 1263px; margin-top: 0px; 
     margin-left: 0px; position: absolute;">

希望它会帮助你，干杯。！如果它有帮助，请将其标记为答案，以便其他人可以解决同样的问题。感谢。

奇怪的css溢出效果发生

3 个答案: