All geek questions in one place

Keeping the footer visible and 100% height in CSS

I am trying to create a very simple page containing a container, a header, a left column and a footer:

<containter> <header /> <content /> <leftBar /> <footer /> </containter>

I want to use 100% height, how can I do with width, but I just don t get it work.At his moment I'm using min-height , but how could I use the height: 100% `? I like that the footer is always visible and you are viewing the content.

Current CSS

 body { font-family: Verdana; font-size: 0.8em; background-color:#f1f1f1; } #container { border:solid 2px Black; position:absolute; left:10%; width:80%; margin:auto; } #header { height:20px; background: #DDDDDD; } #leftBar { width: 20%; background: #669966; min-height:600px; postion:absolute; top:20px; bottom:20px; } #content { float:right; background-color: #cdcde6; position:absolute; left:20%; right:0px; bottom:20px; top:20px; padding:5px; } #footer { position:absolute; height:20px; }
+4
source share
5 answers
 /** * The following allows the usage of height=100% in body tag. * Creds to: http://apptools.com/examples/tableheight.php */ html,body { margin : 0; padding : 0; height : 100%; border : none; }

You need to make html and body accept 100% of the browser viewport.

+2
source

I'm not sure if this is exactly what you are asking for, but it is a good resource when it comes to css layout http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts . It also has an article explaining how to add it to the container: http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width

+1
source 
 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> html, body { margin: 0 auto; height: 100%; } #container { height: 100%; width: 80%; background: #e0e0e0; margin: 0 auto;} </style> </head> <body> <div id="container"> </div> </body> </html>

http://jsbin.com/uyezu

The trick is to extend html, body to 100%

+1
source

In fact, I myself recently installed a similar problem, and the following link provided the perfect solution:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Hope this helps.

+1
source

I have been using this for many years, it still works great:

footerStickAlt: a more reliable way to position the footer
http://www.themaninblue.com/writing/perspective/2005/08/29/

0
source

Source: https://habr.com/ru/post/1310437/

More articles:


All Articles