我想要一个边框底部在我的按钮下方运行div的整个长度。但是，边框底部会产生一个不需要的空间，即使有0填充，0边距和0高度也不会消失。
这里是jsfiddle ： http://jsfiddle.net/z0Lzeppj/3/
继承人html
<body>
<!--Header-->
<div class="header"></div>
<!--End Header-->
<!--Container-->
<div class="container">
<!--Left-->
<div class="left"></div>
<!-- End Left -->
<!--Right-->
<div class="right"></div>
<!-- end Right -->
<!--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" id="show">Show Me</span><span class="filterswitch" id="hide">Hide Me</span>
</label>
<div class="borderline"></div>
<div id="contentSection">
<div id="content2">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-->
<!--Footer-->
<div id="footer">
<ul id="footerlist">
<li id="terms"><a class="termsbutton" href="#termspop">Terms</a>
</li>
<li id="privacy"><a href="">Privacy</a>
</li>
<li id="contact"><a href="">Contact</a>
</li>
<li id="help"><a href="">Help</a>
</li>
<li id="careers"><a href="">Careers</a>
</li>
<li id="developers"><a href="">Developers</a>
</li>
<li id="advertisers"><a href="">Advertisers</a>
</li>
<li id="about"><a href="">About</a>
</li>
<li id="cookies"><a href="">Cookies</a>
</li>
</ul>
</div><!--End Footer-->
</div><!--End Container-->
</body>
和css
html {
min-height:100%;
height:100%;
position:relative;
}
body {
background-color:blue;
min-height:300px;
}
.center {
overflow:hidden;
min-height:100%;
float:none;
background-color:#FFF;
color:#999;
position:relative;
}
#contentSection {
overflow-y:scroll;
position:absolute; bottom:0;
display:inline-block;
background-color:green;
}
/* ------------------Header ----------------*/
.header {
width:100%;
height:5%;
color:#000;
min-width:768px;
min-height:60px;
position:relative;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
margin: 0 auto;
}
/* ------------------Container ----------------*/
.container {
width: 100%;
max-width:100%;
min-width: 768px;
position:relative;
height:90%;
min-height:495px;
max-height:90%;
}
/*----- Left -----*/
.left {
float:left;
width:20%;
text-align:center;
min-height:360px;
height:auto;
position:relative;
min-width:153px;
max-height:95%;
max-width:170px;
}
/*----- Right -----*/
.right {
float:right;
width:20%;
text-align:center;
min-height:440px;
height:auto;
position:relative;
max-height:95%;
max-width:230px;
min-width:160px;
}
/* ------------------Footer ----------------*/
#footerlist li {
float:left;
font-size:12px;
font-weight:bold;
font-family:Arial;
margin-left:10px;
}
#footerlist li a:link {
color:#CCC;
text-decoration:none;
}
/* unvisited link */
#footerlist li a:visited {
color:#CCC;
text-decoration:none;
}
/* visited link */
#footerlist li a:hover {
color:#F90;
text-decoration:underline;
}
/* mouse over link */
#footerlist li a:active {
color:#f90;
text-decoration:none;
}
/* selected link */
#footerlist li a {
color:#000;
}
#footerlist li a :link {
color:#000;
text-decoration:none;
}
/* unvisited link */
#terms #privacy #contact #help #careers #developers #advertisers #about #cookies:visited {
color:#000;
text-decoration:none;
}
/* visited link */
div#footer {
position:relative;
width:100%;
clear: both;
height:2%;
}
#footerlist {
display:table;
margin-left:auto;
min-width:650px;
line-height:24px;
margin-right:auto;
bottom:0px;
white-space:nowrap;
}
/*----- Show me Button-----*/
#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 ~[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;
}
#content {
margin: 0; display:inline-block;
position:relative; bottom:0;
padding: 0;
height:170px;
margin-top:5px;
}
.borderline {
width:100%; display:block;
border-bottom:#000 solid 1px;
height:37px; top:0;
}
答案 0 :(得分：1)
从有效的position:absolute;移除#contentSection
<强> DEMO
答案 1 :(得分：0)
您的边框底部元素的绝对高度为37像素，如果您不想要这么大的div，请将其减小到边框线的大小。
答案 2 :(得分：0)
删除：
位置：绝对;
#contentSection 中的
并添加
身高：100％！重要;
希望对你有用。
答案 3 :(得分：0)
我发现解决方法是移除高度：37px 并将其替换为 padding-bottom：37px http://jsfiddle.net/e0kpfpud/
.borderline {
width:100%; display:block;
border-bottom:#000 solid 1px;
padding-bottom:37px; top:0;
}
也删除位置：绝对;从#contentSection credit到Benji
答案 4 :(得分：-1)
你需要更新css，只需删除.left，.right和.container的高度，最小高度
答案 5 :(得分：-1)
$("#contentSection").css("height", newHeight - 0 + "px");
到
$("#contentSection").css("height", newHeight+30 - 0 + "px");