Question

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

这是jsfiddle：http://jsfiddle.net/fkvftff2/1/

enter image description here

更新这是我的问题，当您拉出窗口并按下隐藏按钮时，它会在div的底部留下一个空白区域。

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

如果你向下看这里是我想要拉伸绿色滚动div的父容器的整个高度，无论如何我伸展它或如何隐藏或显示内容。

enter image description here

这是有问题的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-->

这是css：

.center {
    overflow:hidden;
    min-height:100%;
    float:none;
    background-color:#FFF;
    color:#999;
    position:relative;
}

#contentSection {
    overflow-y:scroll;
    position:relative;
    display:inline-block;
    background-color:green;
}

/*----- Show me Button-----*/
 .filtercontent {
    margin: 0;
    position:relative;
    border-bottom:#000 solid 1px;
    padding: 0;
    height:170px;
    margin-top:5px;
    -webkit-box-sizing: border-box;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#000;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.feedpagetab > section:first-of-type {
    float: right;
    width: 62.5%;
}
.feedpagetab > section:last-of-type {
    display: none;
    visibility: hidden;
}
.feedpagetab {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}
#filterbutton[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
[for="filterbutton"] {
    position: absolute;
    top:4px;
    padding: 0;
    left: 5%;
    width: 80px;
    text-align: center;
    padding: 4px;
    font-weight:bold;
    color: #555;
    text-shadow: 1px 1px 1px #DDD;
    font-family: Helvetica, Arial, "Sans Serif";
    font-size: 13px;
    border: 1px solid #CCC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
    -moz-box-shadow: inset 0px 0px 1px 0px #FFF;
    box-shadow: inset 0px 0px 1px 0px #FFF;
    background: #EEE;
    background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #DDD));
    background: -webkit-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    background: -o-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    background: -ms-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#DDD', GradientType=0);
    background: linear-gradient(top, #F9F9F9 0%, #DDD 100%);
}
[for="filterbutton"]:hover {
    color: #444444;
    font-weight:bold;
    border-color: #BBB;
    background: #CCC;
    background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    background: -o-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    background: -ms-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#CCC', GradientType=0);
}
[for="filterbutton"] span.filterswitch:last-of-type {
    display: none;
    visibility: hidden;
}
#filterbutton[type=checkbox]:checked {
    color:#FFA317;
}
#filterbutton[type=checkbox]:checked ~ .filtercontent {
    display: block;
    visibility: visible;
    width: 100%;
}
#filterbutton[type=checkbox]:checked ~[for="filterbutton"] span.filterswitch:first-of-type {
    display: none;
    visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~[for="filterbutton"] span.filterswitch:last-of-type {
    color:#3CC;
    display: block;
    visibility: visible;
}
.borderline {
    width:100%;
    border-bottom:#000 solid 1px;
    height:0px;
}
.filtercontent {
    margin-left:29%;
}

这是调整大小滚动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％并相应调整大小。

感谢您的帮助。

Answer 1

我认为你有一个比你需要的更多的div。尝试删除#contentSection，并在#content中实现其所有代码。

老实说，如果您尝试在点击按钮时隐藏整个文本，请尝试重写内容文本的样式。比如调整不透明度：1到不透明度：0点击按钮。

Answer 2

要做几个笔记，我不知道所有内容和中心是什么，但我已经编辑了你的代码，并添加了一个切换。 Check out my Fiddle

基本上，我专注于您的内容部分。这是你的新HTML：

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

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

相应的JS在这里：

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

基本上表示如果按下按钮时不透明度为1，则将其设为0，否则保持为1。这是您的CSS的部分（您不需要顶部边框的div。只需使用border-top。也可以居中，制作宽度= 100％的容器，然后您的课程内部给它一个宽度和有余量：自动）

#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底部的空白区域

2 个答案: