根據

Question

Toogle頁腳和修改身高我有一個簡單的網頁，其中包含一個可隱藏的頁腳。

頁腳隱藏/顯示正確，但身體高度以及應該修改的垂直滾動條不。

如何修改代碼以便在顯示/隱藏頁腳時調整主體大小？

我認爲這與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