html - Sticky header, sticky footer (variable height), fluid middle? -


i'm trying put simple 3 row layout in css. needs:

  • a main container div (100% width, 100% height) holds...
    • a sticky header (fixed height of 48px)
    • a middle section fills remaining space in-between header , footer
    • a sticky footer (initial height of 62px, can change after page-load via javascript)

here's i've got far:

html

<body>     <div id="container">         <div id="headcontainer">             ...         </div>         <div id="bodycontainer">             stuff goes here         </div>         <div id="footcontainer">             ...         </div>     </div>  </body>

css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {     margin: 0;     padding: 0;     border: 0;     font-size: 100%;     font: inherit;     vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0; }  body {     background-color:#2c3e50; }  div#container {     height:100%;     width:100%; }  div#headcontainer {     background-color:#e74c3c;     height:48px;     width:100%;     z-index:1; }  div#bodycontainer {     overflow:auto;     width:100%;     top:48px;     position:absolute;     background-color:#ffffff; }  div#footcontainer {     background-color:#c0392b;     width:100%;     position:absolute;     bottom:0;     padding:11px 18px;     box-sizing:border-box;     -moz-box-sizing:border-box; /* firefox */     -webkit-box-sizing:border-box; /* safari */ }

http://jsfiddle.net/mskaj/2/

i'm struggling work out how 'bodycontainer' fill available space between header , footer. if footer fixed size, lot easier!

any tips?

all other solutions here out of date , either resort javascript, or don't support variable height footer.

with advent of css flex model, solving variable-height sticky footer problem becomes very, easy: while known laying out content in horizontal direction, flexbox works vertical layout problems. have wrap vertical sections in flex container , choose ones want expand. they'll automatically take available space in container.

note how simple markup , css are. no table hacks or anything.

the flex model supported major browsers allegedly ie11+, though ie doesn't render snippet correctly yet.

html, body {    height: 100%;  }    #headcontainer {    background: yellow;    height: 100px;  /* can variable */  }    #wrapper {    display: flex;  /* use flex model */    min-height: 100%;    flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */  }    #bodycontainer {    flex: 1;    border: 1px solid orange;  }    #footcontainer {    background: lime;  }
<div id="wrapper">    <div id="headcontainer">title</div>    <div id="bodycontainer">stuff goes here</div>    <div id="footcontainer">      footer<br/>      of<br/>      variable<br/>      height<br/>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

rewrite - Trouble with Wordpress multiple custom querystrings -

i'm working on adding multiple querystring , doesn't seem work. i've found codes seems work others might i'm missing something. i want like: http://mydomain.com/board/?getyear=2013&getsometext2=sometext to http://mydomain.com/board/2013/sometext/ i added code below functions.php file. doesn't seem work should though. this works. echoing querystring gets both variable without problem. http://mydomain.com/board/2013/sometext/ but doesn't. tested querystring vis isset() seems nothing being set/get http://mydomain.com/board/2013/ function add_query_vars($vars) { $vars[] = "getyear"; $vars[] = "getsometext2"; return $vars; } add_filter('query_vars', 'add_query_vars'); function add_rewrite_rules($arules) { $anewrules = array('board/([^/]+)/([^/]+)/?$' => 'index.php?pagename=board&getyear=$matches[1]&getsometext2=$matches[2]'); $arules = $a...
Read more