切换页脚并修改身高

Question

我有一个包含可隐藏页脚的简单网页。

页脚确实隐藏/显示但是身高和应该修改的垂直滚动条没有。

如何在显示/隐藏页脚时修改代码以使主体调整大小？

我认为这与DOM元素位置有关，但我无法弄清楚如何去做。

Here is a fiddle of the code

页脚

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

的Javascript

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;
}

的CSS

BatteryData =     {
        BatterySerialNumber = REDACTED;
        ChemID = 355;
        CycleCount = 524;
        DesignCapacity = 1420;
        Flags = 640;
        FullAvailableCapacity = 1325;
        ManufactureDate = REDACTED;
        MaxCapacity = 1273;
        MfgData = REDACTED;
        QmaxCell0 = 1350;
        StateOfCharge = 100;
        Voltage = 4194;
    };

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