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
Post a Comment