Question

我正在尝试在某些浏览器中修复我的网站上的bootstrap scrollspy。我发现（并且已经看过很多讨论）因为body元素的高度为100％，所以scrolllspy在某处不起作用。

我已经创建了具有此问题的简单网页（在Opera 20中运行良好，在Firefox 7中不起作用）。当我移除身高100％时一切正常。问题是我需要有100％的身高。有一些解决方法吗？知道如何修复它并保持身体元素的100％高度吗？谢谢！

jsfiddle.net示例： http://jsfiddle.net/eedZL/

CSS：

*{width:0;margin:0;}
html,body{width:100%;height:100%;}
.promo{width:100%;height:100%;background:#ccc;text-align: center;}
.slide{width:100%;height:500px;background:#333;}
.navigation{position:fixed;width:400px;height:300px;background:#fff;right:20px;top:20px;}
.navigation ul li{list-style-type: none;width:200px;}
.navigation ul li.active{color:red;background: #ccc;padding:10px;}

HTML

...
<body data-spy="scroll" data-target=".navigation">

<div class="promo" id="home">Some welcome screen</div>
<div class="slide" id="first">Slide #1</div>
<div class="slide" id="second">Slide #2</div>
<div class="slide" id="third">Slide #3</div>
<div class="navigation">


        <ul class="standard-nav nav nav-tabs">
            <li><a class="scrolling-nav" href="#home">Welcome screen</a></li>
            <li><a class="scrolling-nav" href="#first">First slide</a></li>
            <li><a class="scrolling-nav" href="#second">Second slide</a></li>
            <li><a class="scrolling-nav" href="#third">Third slide</a></li>
        </ul>


</div>
</body>
...

JS

$(document).ready(function(){
  $('body').scrollspy({ target: '.navigation', offset: 100});
});

Scrollspy和身高100％

0 个答案: