Scrollspy and body height 100%

Question

I'm trying to fix bootstrap scrollspy on my website in some browsers. I found (and already saw a lot of discussions) that scrollspy doesn't work somewhere because of height 100% on body element.

I've created simple webpage with this problem (works well in Opera 20, doesn't work for example in Firefox 7). When I remove body height 100% everything works. Problem is that i need to have 100% height of body. Is there some workaround? Any idea how to fix it and keep 100% height of body element? Thanks!

jsfiddle.net example: 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});
});

JSFiddle link added to main post (http://jsfiddle.net/eedZL/), thanks! — user2595304, Feb 12 '14 at 18:14
Are you sure you need to give support to firefox 7? Firefox now is on version 27 — ppollono, Feb 12 '14 at 18:29
Your code is working perfectly fine in Opera, Safari, Ie, FF, Opera and Crhome — ppollono, Feb 12 '14 at 18:31
Sure, it's not about FF7 but it's not working also in FF 20 (version 25 works well - tested on MAC version) http://ftp.mozilla.org/pub/mozilla.org/firefox/releases/ — user2595304, Feb 12 '14 at 18:46

score 2 · Answer 1 · answered May 20 '22 at 18:08

I add my grain of salt ( after 8 years). I solved with a bit of JS. I added a height with inline style and then changed it with JS once the page loaded.

This is the div:

<div class="scrollspy-body" data-spy="scroll" data-target="#sidebar" data-offset="0" style="height: 0px;">

And this is the JS used to change the size:

window.onload = function(){
 const h=document.body.parentElement.scrollHeight
 const scrollspy = document.getElementsByClassName("scrollspy-body")[0]
 scrollspy.style.height=h+"px"    
 };

Basically, once everything is loaded, measure the height of body and apply it to scrollspy.

Best

Scrollspy and body height 100%

1 Answers1