Toogleのフッターとボディの高さを変更する

Question

私は隠すことのできるフッターを含む簡単なウェブページを持っています。

フッターは正しく表示/非表示されますが、ボディーの高さと修正する必要がある垂直スクロールバーはありません。

フッターの表示/非表示時に本文のサイズを変更するには、コードを変更するにはどうすればよいですか？

私はこれがDOM要素の位置と関連していると思いますが、その方法を理解できませんでした。

Here is a fiddle of the code

フッター

<span id="footerToogle">TOGGLE FOOTER</span> 
<footer>FOOTER</footer> 

Javascriptを

var element = document.getElementById("footerToogle"); 
    element.onclick = function() { 
    element.classList.toggle('inactive'); 
}; 

のCss

html { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important; 
    margin: 0; 
    padding: 0; 
    height:100%; 
} 

header { 
    width: 100%; 
    position: fixed; 
    top: 0; 
    height:75px; 
    z-index: 100; 
    font-size: 16px; 
    color: white; 
    background: #5A5A5A; 
} 
#body { 
    position:absolute; 
    bottom:76px; 
    top:75px; 
    width:100%; 
    overflow-y:auto; 
} 

footer { 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
    margin: 0; 
    max-height: 75px; 
    height: 75px; 
    background: #5A5A5A; 
    color: white; 
    -webkit-transition: max-height 0.5s; 
    transition: max-height 0.5s; 
} 

#footerToogle { 
    position: absolute; 
    left: 0; 
    bottom: 75px; 
    padding: 1em; 
    background: #5A5A5A; 
    color:white; 
    -webkit-transition: bottom 0.5s; 
    transition: bottom 0.5s; 
} 

#footerToogle.inactive { 
    bottom: 0px; 
} 

#footerToogle.inactive + footer { 
    max-height: 0px; 
} 

Answer 1

これは、#bodyが下部から76pxに配置され、フッターのスペースが残っているためです。フッターを非表示にして、下部の位置をクリアする必要があります。あなたのコードは次のように変更します。

var element = document.getElementById("footerToogle"); 
element.onclick = function() { 
    element.classList.toggle('inactive'); 
    document.getElementById('body').classList.toggle('noFooter'); 
}; 

とCSS

#body.noFooter { 
    bottom: 0; 
} 

JSFIDDLE

Answer 2

あなたは新しいクラスが底を上書きすることをボディにクラスを追加して行うことで、あなたが望むものを達成すべきです既存のスタイル（コメントは私が下に追加したものを示しています）：

var element = document.getElementById("footerToogle"); 
 
element.onclick = function() { 
 
    element.classList.toggle('inactive'); 
 
    element.previousElementSibling.classList.toggle('without-footer'); // add this 
 
};

html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important; 
 
    margin: 0; 
 
    padding: 0; 
 
    height:100%; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    height:75px; 
 
    z-index: 100; 
 
    font-size: 16px; 
 
    color: white; 
 
    background: #5A5A5A; 
 
} 
 
#body { 
 
    position:absolute; 
 
    bottom:76px; 
 
    top:75px; 
 
    width:100%; 
 
    overflow-y:auto; 
 
    transition: bottom 0.5s; /* add this */ 
 
} 
 

 
#body.without-footer { /* add this */ 
 
    bottom:0; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    position: fixed; 
 
    bottom: 0; 
 
    margin: 0; 
 
    max-height: 75px; 
 
    height: 75px; 
 
    background: #5A5A5A; 
 
    color: white; 
 
    -webkit-transition: max-height 0.5s; 
 
    transition: max-height 0.5s; 
 
} 
 

 
#footerToogle { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 75px; 
 
    padding: 1em; 
 
    background: #5A5A5A; 
 
    color:white; 
 
    -webkit-transition: bottom 0.5s; 
 
    transition: bottom 0.5s; 
 
} 
 

 
#footerToogle.inactive { 
 
    bottom: 0px; 
 
} 
 

 
#footerToogle.inactive + footer { 
 
    max-height: 0px; 
 
}

<header>HEADER</header> 
 
<div id="body" style="text-align:center;"> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
    Body<BR> 
 
</div> 
 
<span id="footerToogle">TOGGLE FOOTER</span> 
 
<footer>FOOTER</footer>

Updated fiddle