Javascript 隐藏/显示内容导致div底部出现空白

我需要帮助尝试将滚动div拉伸到其父容器的100%高度，但是隐藏/显示内容会在div底部创建一个空白

以下是JSFIDLE：

更新 这是我的问题，当你向外拉伸窗口并按下隐藏按钮时，它会在div的底部留下一个空白

罪魁祸首是切换按钮。“显示块”和“显示隐藏”似乎隐藏了白色div内容，但它仍然会影响底部带有空白的div

如果您往下看，这就是我想要将绿色滚动div拉伸到父容器的整个高度，无论如何 我拉伸它或如何隐藏或显示内容

下面是有问题的html：

    <!--Center-->
    <div class="center">

     <!--Feed Content-->
     <div id="feed-content">
     <div id="networkfeed" class="feedpagetab activefeed">

     <input type="checkbox" id="filterbutton" role="button">
     <label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span> 
      </label>
                <br />
                <br />
      <div class="borderline"></div>

       <section class="filtercontent"></section><!--Filtercontent ends here-->

        <div id="contentSection">
        <div id="content">Lorem ipsum dolor sit amet, ius an dolorum lucilius sensibus, et sint graeco nec. Iudico atomorum eam eu. Nec equidem conceptam id. Cum velit viris voluptua an. Sea eu harum eirmod eloquentiam, quaestio complectitur voluptatibus in nam, an dicam platonem adolescens has. Te usu esse idque, no modo tractatos sed. Vero audire sapientem an sit, homero recteque pri in, vis at vidit admodum. Ex quo doctus eleifend contentiones, vis odio mucius tritani ut. Id cetero nostrud dissentiunt mel. Docendi scaevola vis ei. Vel et ponderum electram expetendis, cum cu quaestio definitionem, etiam ponderum vix ei. Ut his feugait assentior philosophia, atqui definitionem at mei. Liber sonet dictas ea has, nec odio fabellas ei. Vel oratio quodsi in, duo minim admodum ea. Pri id dolorum indoctum, vim at alia tritani. No pro esse error solet, vix quis prodesset ei. Tollit accommodare vis at, sed in tamquam prompta dolorem. Nam solum definitionem an, dicta nostrum adversarium ne nec. Eu docendi nominavi similique pri. Qui an natum tamquam, dictas invenire mei id. Cu omittam insolens rationibus ius, dicunt inciderint cum ea. Est vero dolorem et, assum antiopam mea ne. Te vel choro audiam, eum equidem nostrum ex. Ea nam offendit definitiones. In etiam debitis similique cum. Ius regione incorrupte te, utinam ceteros an has, omnium concludaturque cum eu. Eu sumo adhuc ius. Quo choro quodsi latine an. Nonumy deleniti duo ex, fastidii menandri accusata ut mea, ad minimum omnesque quo. Cum in molestiae mediocritatem. Partiendo voluptaria cum te. Illud reque convenire duo et, audiam denique consectetuer mei te. Bonorum fabellas interpretaris mel ad. Eu sanctus nominavi ius, oratio vocibus indoctum ea eos. Et nisl doming vituperatoribus vis. Ullum percipit inciderint ei duo, ex usu stet essent. Quis errem legere ex quo, usu ludus decore ut, vix cetero convenire honestatis et. Mucius nusquam platonem per et, cu mei nibh erant inermis. Ne quo erant commodo sadipscing. Mei delenit tibique aliquando no, vim ex omnis vocibus scriptorem. Reque aperiam hendrerit et per, sit suas vivendo corrumpit in. Ius ei falli doming periculis. Nam quis iuvaret at. Impedit minimum similique ei pri, graeco interpretaris eu ius, dolor probatus scribentur in qui. Duo aliquam omittam voluptaria no. Vel enim hendrerit persecuti ne. Sed no idque fastidii neglegentur. Everti accusamus deterruisset eos ut, an sea feugiat alienum rationibus. Duo ex graece gloriatur, lorem appetere inimicus sed eu, autem sanctus in ius. No lorem altera qualisque eum, id eum labore necessitatibus, sit no diceret pertinax partiendo. At pri hinc solet voluptatum, ut debitis intellegam vix. Decore ridens comprehensam sea id, ius aperiam delicatissimi no. Quas molestie ei his, in has augue equidem adipisci.
         </div><!--End Content-->             
         </div><!--End Content Section-->



      </div> <!--End Network feed-->
    </div><!--End Feed Content-->
</div><!--End Center-->

这是用于调整滚动div大小的javascript

var height = 0;
var minHeight = 200;
$("#content").parent().siblings().each(function () {
    height = height + $(this).height();
});
// for when the document is loaded
$(document).ready(function () {
    var windowheight = $(window).height() - 100;
    $(".center").height();
    $(".center").css("min-height", minHeight + height + "px");
    var newHeight = $(".center").height() - height;
    $("#contentSection").css("height", newHeight - 0 + "px");
});

// for the window resize
$(window).resize(function () {
    var windowheight = $(window).height() - 100;
    $(".center").height(windowheight);
    $("#content").height($("#content").parent().height());
    var newHeight = $(".center").height() - height;
    $("#contentSection").css("height", newHeight - 0 + "px");
});

从小提琴上可以看出，当你垂直拉伸div，按下按钮显示内容时，它会在滚动div的底部移动一个空格。我的目标是删除滚动div区域中的所有空格。因此，滚动div占据100%的高度，并相应地调整大小

---

谢谢你的帮助。

我想你的div比你需要的多。尝试删除contentSection，并在内容中实现其所有代码

---

老实说，如果您试图在单击按钮时隐藏整个文本，那么请尝试重写内容文本的样式。类似于单击按钮将不透明度：1调整为不透明度：0

请注意，我不知道提要和中心是什么，但我对您的代码进行了细微的编辑，并添加了一个切换

基本上，我关注的是你的内容部分。以下是您的新HTML：

  <button onclick="toggleContent()">Toggle Visibility</button>

  <div id="contentWrapper">
    <div id="content">
      text goes here. longer version in JSFiddle
     </div>             
  </div>

基本上就是说，如果按下按钮时不透明度为1，则将其设为0，否则保持为1。 这是你的CSS，你不需要一个div作为上边框。只需使用边框顶部。另外，为了居中，制作一个宽度为100%的容器，然后里面的类给它一个宽度并留有边距：auto

#contentWrapper{
 width:100%;
 position:relative;
 border-top:1px solid black;
 padding-top:10px;
 margin-top:10px;
}

#content {
 overflow-y:scroll;
 background-color:green;
 height:400px;
 width:500px;
 margin:auto;
}

---

希望这能澄清一些事情

我仍然得到同样的结果。你自己试试看。几乎一直拉伸窗口的高度，然后单击“显示我”按钮，然后单击“隐藏我”按钮。现在当内容被隐藏时，你会在底部看到一个空白。这就是你想要实现的吗？如果没有，你能添加一个最终结果应该是什么样子的图像吗？很接近，但我试图阻止底部的空白将滚动div向上推。不应该有任何空白。我在上面添加了一个图像。删除div contentselection没有任何作用。问题在于filtercontent、filterbutton和.feedpagetab，这就是导致底部出现空白的原因。如果删除这些div，输入的所有内容都会像inteded一样工作，例如：不幸的是，我需要隐藏/显示按钮来工作：/javascript和常规代码令人困惑，而且过于复杂。您所需要的只是复选框或按钮上的一个计数器，如果它可以被2整除，则不透明度=0，否则不透明度=1。此外，删除contentselection不会改变任何东西这一事实也表明该div是多么无用，所以不要使用它。您试图实现的是以许多不同的方式完成的，这些方式不那么复杂……您能提供一个JSFIDLE来说明如何使用不透明度来显示或隐藏内容吗？我不熟悉js隐藏和显示内容的方式。至于我正在使用的布局称为holygrail，这是唯一一种在拉伸窗口时可以保持灵活宽度的布局，但是如果你有更好的选择，请演示。根据您的内容进行调整！它在可见性=隐藏/可见或不透明度=0/1的情况下工作，为了让内容消失和其他一切，现在的空白显示=块/无也起作用，我将其更改为显示无和显示块，但是我得到了相同的结果。当你按下按钮时，有没有一种方法可以完全删除div内容，不仅使其消失，而且仍然影响容器？由于某种原因，当我在jfiddle中实现你的代码时，不透明黑客不起作用。自己试试看：Content div在任何时候都是可见的，不能打开或关闭。首先在javascript代码中，让getElementByIdcontent将其更改为content2。第二，在html中，例如在html中添加不透明样式，如下所示：我想打开或关闭空白，而不是内容。看看最初的小提琴。如你所见，它可以打开或关闭空白。好的，我迷路了。你试图用空白来掩盖内容。。。你为什么不。。。你知道的。。。使其不可见…？空白处应该包含一个过滤器。所以我试着做一个下拉过滤器，当你按下显示按钮时，过滤器会弹出。你明白了吗？我更新了原始的JSFIDLE以避免混淆。我给这张皮[秀]打了一个黑色的手势 出身背景

function toggleContent() {
  // Get the DOM reference
  var e = document.getElementById("content");
  // Toggle 
  e.style.opacity == "1" ? e.style.opacity = "0" : 
  e.style.opacity = "1"; 
}

#contentWrapper{
 width:100%;
 position:relative;
 border-top:1px solid black;
 padding-top:10px;
 margin-top:10px;
}

#content {
 overflow-y:scroll;
 background-color:green;
 height:400px;
 width:500px;
 margin:auto;
}