html - Make small pages fill browser height -


How do you make small pages to fill the height of the browser so that the footer is not in the middle

< P> For example

  & lt; Body & gt; & Lt; Div data-off scan = "off canvas-wrap" & gt; & Lt; Div class = "inner-rap" & gt; & Lt;% = Render 'Layout / Navigation'% ' & Lt; Section square = "main-section" & gt; & Lt;% = Render 'Layout / Message'% & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "large -12 column" & gt; & Lt;% = yield% & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Section & gt; & Lt; Div class = "footer-bottom" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "small-12 column small-center text-center" & gt; & Lt; Ul class = "foot-link" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Twitter & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Privacy Policy & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Sitemap & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; P class = "copyright" & gt; © 2011-2014 Acme, Inc. All rights reserved. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; A class = "exit-of-canvas" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt;% = javascript_include_tag "Application"% & gt; & Lt; Script & gt; $ (Document) .foundation (); & Lt; / Script & gt; & Lt; / Body & gt;  

When a low yield then the footer ends in the middle of the page. I'm fine with the footer on the bottom, and I'm fine even after a bunch of materials, so it's OK to scroll. I've searched and want the most sticky footer what I want. I do not always want to get it down on the bottom, I just want to be 1 page at the height of each page.

How can I get it?

like this:

CSS

  html, body, .off - kanus-rap, .ner-rap {status: relative; Minimum height: 100%; } .Pail-wrap {padding-down: [high of your footer] px; } .footer-bottom {status: absolute; Bottom: 0 pixels; }  

Note: You must use class = "" incorrectly used unique elements with id = "" If you are pickuped: -)


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -