html - Vertical div expansion w/o fixed heights -

-

before roll eyes , move on, know how solve problem using fixed height , absolution positioning top: , bottom:, want solve without using fixed heights. want learn more css i'm trying solve different way.

i have set typical navbar running across top, , scrolling content div below.

however! how fit bottom scrolling div container remaining space without using absolute coordinates? can't position: absolute, because i'd need know height of navbar set "top:". , can't "bottom: 0" because i'd have specify height.

here's js filddle:

http://jsfiddle.net/8dugffz4/1/

the class of interest ".result". have height fixed, don't want.

thanks, y'all. pt

css:

* {   font-family: helvetica, sans;   border: 0px;   margin: 0px;   padding: 0px; }  .navbar {   width: auto;   overflow: auto;   border-bottom: 1px solid #bbb; }  .pagebar {   float: right; }  .pager {   cursor: pointer;   float: left;   border: 1px solid #bbb;   width: 2em;   height: 2em;   line-height: 2em;   text-align: center;   margin: 5px;   margin-left: 0px;   background: #eee;   color: #bbb; }  .pager:hover {   background: #777;   border: 1px solid black;   color: white; }  .fliph {   -ms-transform:scale(-1,1); /* ie 9 */   -moz-transform:scale(-1,1); /* firefox */   -webkit-transform:scale(-1,1); /* safari , chrome */   -o-transform:scale(-1,1); /* opera */ }  .results {   background: gray;   width: 100%;   height: 200px;   overflow: scroll; }  .line {   height: 10em;   line-height: 10em;   border: 1px solid red; }

html:

<body>     <div class='navbar'>         <div class='pagebar'>             <div class='pager'>&#9665;</div>             <div class='pager'>1</div>             <div class='pager fliph'>&#9665;</div>         </div>     </div>     <div class='results'>         <div class='line'>line1</div>         <div class='line'>line2</div>         <div class='line'>line3</div>         <div class='line'>line4</div>     </div> </body>

here's solution uses display: table , can achieve fluid heights:

http://jsfiddle.net/8dugffz4/8/

and minimalistic snippet in case want see did:

* {    margin: 0;    padding: 0;  }  html,  body {    height: 100%;  }  #table {    display: table;    height: 100%;    width: 100%;  }  #table > div {    display: table-row;  }  #navbar {    height: 45px;    opacity: .5;  }  #navbar > div {    height: 100%;    background: black;  }  #results {    height: 100%;  }  #results > div {    height: 100%;    overflow: auto;    background: green;  }
<div id="table">    <div id="navbar">      <div></div>    </div>    <div id="results">      <div></div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more