html - Fluid height main body with header and footer -



html - Fluid height main body with header and footer -

what trying have header @ top of page , footer @ bottom, map total availiable space in-between. want header , footer have fixed heights px not %.

however, @ moment because set main map 100% forces footer off bottom of page , introduces scroll bar.

this illustration code: http://jsfiddle.net/w4mxp/20/

css

html, body { height: 100%; width: 100%; } #topbar { height: 50px; width: 100%; background-color: black; padding-left: 50px; padding-right: 50px; } #main { height: 100%; width: 100%; background-color: green; } #bottombar { height: 25px; width: 100%; background-color: black; padding-left: 50px; padding-right: 50px; } .left {float: left;} .right {float: right;}

html

<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <body> <!-- header --> <div id="topbar"> <div class="left"> logo </div> <div class="right"> <form> <div id="radio"> <input type="radio" id="radio1" name="radio" /><label for="radio1">choice 1</label> <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">choice 2</label> <input type="radio" id="radio3" name="radio" /><label for="radio3">choice 3</label> </div> </form> </div> </div> <!-- map --> <div id="main"> map </div> <!-- footer --> <div id="bottombar"> <div class="left"> name </div> <div class="right"> </div> </div> </body> </html>

my reply here may help: set div block 100% height

simply set height of footer , negative margin on content:

#footer { height:100px; } #container { margin-bottom:-100px; padding-bottom:100px; }

here illustration of how you'd include footer: jsfiddle.

do note not work in ie7 due usage of box-sizing.

edit: you'll need add together padding container prevent container text appearing under footer. i've fixed jsfiddle illustration include this.

html css web height

Comments

Post a Comment

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer - when trying request rest service @ time of response getting exception.. feb 21, 2013 2:34:49 pm com.sun.jersey.spi.container.containerresponse mapmappablecontainerexception severe: exception contained within mappablecontainerexception not mapped response, re-throwing http container java.lang.noclassdeffounderror: not initialize class net.sf.cglib.proxy.enhancer @ org.hibernate.proxy.pojo.cglib.cgliblazyinitializer.getproxyfactory(cgliblazyinitializer.java:117) @ org.hibernate.proxy.pojo.cglib.cglibproxyfactory.postinstantiate(cglibproxyfactory.java:43) @ org.hibernate.tuple.entity.pojoentitytuplizer.buildproxyfactory(pojoentitytuplizer.java:162) @ org.hibernate.tuple.entity.abstractentitytuplizer.<init>(abstractentitytuplizer.java:135) @ org.hibernate.tuple.entity.pojoentitytuplizer.<init>(pojoentitytuplizer.java:55) @ org.hibernate.tuple.e...
Read more

Accessing MATLAB's unicode strings from C -

Accessing MATLAB's unicode strings from C - how can access underlying unicode info of matlab strings through matlab engine or mex c interfaces? here's example. let's set unicode characters in utf-8 encoded file test.txt, read as fid=fopen('test.txt','r','l','utf-8'); s=fscanf(fid, '%s') in matlab. now if first feature('defaultcharacterset', 'utf-8') , c engevalstring(ep, "s") , output text file utf-8. proves matlab stores unicode internally. if mxarraytostring(enggetvariable(ep, "s")) , unicode2native(s, 'latin-1') give me in matlab: non-latin-1 characters replaced character code 26. need getting access underlying unicode info c string in unicode format (utf-8, utf-16, etc.), , preserving non-latin-1 characters. is possible? my platform os x, matlab r2012b. addendum: documentation explicitly states "[mxarraytostring()] supports multibyte encoded characters...
Read more

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more