HTML, CSS, Sticky Header and Footer, Minimum Height Content DIV -

-

i have reviewed number of posts , have not found looking for. perhaps might have missed something. if so, apologies. have sticky header , footer , content div observe minimum height of 100%. in case div requiring minimum height has id of "minheightcontainer". have commented out number of paragraphs within div when un-commented illustrate desired vertical scroll behavior. however, when commented out div observe minimum height of 100% due different background colors on various elements. html , css shown below. assistance appreciated.

<!doctype html>    <html>    <head>    <title>sticky header , footer</title>    <style type="text/css">  @font-face  {      font-family:segoe ui;  }    @font-face  {      font-family:segoe ui semibold;  }    @font-face  {      font-family:segoe ui light;  }    body  {      background:#fff;      border:0px;      color:#323232;      font-family:"segoe ui";      font-size:12px;      height:100%;      margin:0px;      max-height:100%;      overflow-y:scroll;  }    .background  {      background-color:#eee;      bottom:0px;      left:0px;      position:fixed;      right:0px;      top:0px;      z-index:-1;  }    .container  {      margin:0px auto 0px auto;      min-height:100% !important;      width:1190px;  }    .container-front  {      background-color:#fff;      padding:35px 5px 50px 5px;  }    .header-footer  {      background-color:#455a72;  }    .navbar  {      min-height:30px;      position:relative;      z-index:1000;  }    .navbar-fixed-top  {      left:0px;      position:fixed;      right:0px;      top:0px;      z-index:1030;  }    .navbar-header  {      background:url('images/header.png') no-repeat right 0px;  }    .shadow  {      -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);      -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);      box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);  }    .toolbar  {      min-height:45px;      position:relative;      z-index:1000;  }    .toolbar-fixed-bottom  {      bottom:0px;      left:0px;      position:fixed;      right:0px;      z-index:1030;  }  </style>    </head>    <body>      <form>          <div class="background">          </div>          <div class="header-footer navbar navbar-fixed-top">              <div class="container navbar-header">                  header              </div>          </div>          <div class="container container-front shadow" id="minheightcontainer">  		<p>start</p>      <!-- uncomment observe vertical scroll    <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  -->      <p>end</p>          </div>          <div class="header-footer toolbar toolbar-fixed-bottom">              <div class="container">                  footer              </div>          </div>      </form>  </body>  </html>

you need add 2 more lines of css:

  • to make % height works use this:

html,form {height:100%}

  • and avoid padding increase height of container use this

.container-front { box-sizing:border-box; }

check snippet below

<!doctype html>    <html>    <head>    <title>sticky header , footer</title>    <style type="text/css">  @font-face  {      font-family:segoe ui;  }    @font-face  {      font-family:segoe ui semibold;  }    @font-face  {      font-family:segoe ui light;  }  html,form {height:100%}  body  {      background:#fff;      border:0px;      color:#323232;      font-family:"segoe ui";      font-size:12px;      height:100%;      margin:0px;      max-height:100%;      overflow-y:scroll;  }    .background  {      background-color:#eee;      bottom:0px;      left:0px;      position:fixed;      right:0px;      top:0px;      z-index:-1;  }    .container  {      margin:0px auto 0px auto;      min-height:100% !important;      width:1190px;  }    .container-front  {      box-sizing:border-box;      background-color:#fff;      padding:35px 5px 50px 5px;  }    .header-footer  {      background-color:#455a72;  }    .navbar  {      min-height:30px;      position:relative;      z-index:1000;  }    .navbar-fixed-top  {      left:0px;      position:fixed;      right:0px;      top:0px;      z-index:1030;  }    .navbar-header  {      background:url('images/header.png') no-repeat right 0px;  }    .shadow  {      -moz-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);      -webkit-box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);      box-shadow:0px 0px 100px 0px rgba(50, 50, 50, 0.25);  }    .toolbar  {      min-height:45px;      position:relative;      z-index:1000;  }    .toolbar-fixed-bottom  {      bottom:0px;      left:0px;      position:fixed;      right:0px;      z-index:1030;  }  </style>    </head>    <body>      <form>          <div class="background">          </div>          <div class="header-footer navbar navbar-fixed-top">              <div class="container navbar-header">                  header              </div>          </div>          <div class="container container-front shadow" id="minheightcontainer">  		<p>start</p>      <!-- uncomment observe vertical scroll    <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  <p>here text.</p>  -->      <p>end</p>          </div>          <div class="header-footer toolbar toolbar-fixed-bottom">              <div class="container">                  footer              </div>          </div>      </form>  </body>  </html>


Comments

Post a Comment

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

-
i getting error message , further 1 here: failed read artifact descriptor org.apache.maven.plugins:maven-install-plugin:jar:2.4: even though when go .m2 repository path c:\users\a591024.m2\repository\org\apache\maven\plugins\maven-resources-plugin\2.4 the maven-resources-plugin-2.4.jar file there , maven-resources-plugin-2.4.pom there. have tried delete .m2 repository no luck. far maven not build project desperately need to. any ideas? it seems proxy issue please aad following in setting.xml grabbing lan setting , proxy information. <proxies> <proxy> <id>proxy</id> <active>true</active> <protocol>http</protocol> <host>hostname</host> <port>port</port> </proxy> </proxies> this frequent issue, please see below link well. plugin org.apache.maven.plugins:maven-clean-plugin:2.5 or 1 of dependencies not resolved maven: failed ret...
Read more

Round ImageView Android -

-
Image
i working on android application in doing rounded image view. working fine images, images 160x120 resolution shows oval shaped. code custom imageview given below, please me out here: public class roundimage extends drawable { private final bitmap mbitmap; private final paint mpaint; private final rectf mrectf; private final int mbitmapwidth; private final int mbitmapheight; public roundimage(bitmap bitmap) { mbitmap = bitmap; mrectf = new rectf(); mpaint = new paint(); mpaint.setantialias(true); mpaint.setdither(true); final bitmapshader shader = new bitmapshader(bitmap, shader.tilemode.clamp, shader.tilemode.clamp); mpaint.setshader(shader); mbitmapwidth = mbitmap.getwidth(); mbitmapheight = mbitmap.getheight(); } @override public void draw(canvas canvas) { canvas.drawoval(mrectf, mpaint); } @override protected void onboundschange(rect bound...
Read more

How can I utilize Yahoo Weather API in android -

-
Image
i want develop app using yahoo weather api android. want current , forecast weather details. i have tried different sources (e.g.: https://github.com/survivingwithandroid/weatherlib , getting error weatherlib api android , unable execute activity in android weatherlib ) , getting different errors m unable resplve. there can proper tutorial or guide! error: -17 08:50:48.961 3168-3168/com.survivingwithandroid.weather e/androidruntime﹕ fatal exception: main process: com.survivingwithandroid.weather, pid: 3168 java.lang.runtimeexception: unable start activity componentinfo{com.survivingwithandroid.weather/com.survivingwithandroid.weather.mainactivity}: java.lang.nullpointerexception: attempt invoke interface method 'boolean java.util.list.isempty()' on null object reference @ android.app.activitythread.performlaunchactivity(activitythread.java:2298) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2360) @ android.app.activi...
Read more