0
Я хочу, чтобы нижнее нижнее нижнее нижнее ядро пробегало под моей кнопкой всю длину div. Тем не менее, нижняя граница создает нежелательное пространство, которое не исчезает даже с 0 отступом, 0 маржи и 0 высотой.Пограничный снизу оставляет нежелательное пространство внизу
Вот jsfiddle : http://jsfiddle.net/z0Lzeppj/3/
Heres 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;
}
Это действительно то, что вы хотите сделать с '# contentSection'' позиция: absolute; 'если не считать того, что он работает отлично. – Benjamin
вы ищете что-то вроде этого - http://jsfiddle.net/z0Lzeppj/4/ –
Похоже, что здесь нужно согласиться с Бенджамином. Этот макет, который вы хотите достичь, не является сложным, и вы делаете его сложным. Позиция: абсолютная; не требуется для достижения того, чего вы хотите здесь ... – Michael