Geek Answers Handbook

Height problems

I have a problem regarding height. I have a footer following below:

<html> <body> <div class='wrap'> <div class=principal></div> <div class='clear'></div> <footer><img alt='Logotype' /></footer> </div> </body> </html> html,body{ height:100%; }; .wrap{ height:auto!important; height:100%; min-height:100%; width:100%; } .clear{ clear:both; } footer{ position:absolute; bottom:0; height:50px; width:100%; }

There is another way that puts margin: 0 auto -50px in .wrap and puts the footer outside the wrapper.

I need .principal to have 100% height when there is not much content, because I have a component that introduces .principal a <div style='height:100%>insert text and graphics/charts here</div> .

See the examples below to better understand:

Image 1:

Content 100%

I need content (.principal) to have 100% height due to component. I have a menu that opens when clicked and should have a content size (.principal), I want a footer at the bottom of the page.

Image 2:

Content Scrolling

If there is more content (due to text or something else), I want the scroll and footer to disappear and the title fixed.

Image 3:

Picture

A footer should appear at the bottom of the scroll. When the menu is open, the menu should have a height of the size of the displayed content (in this case height = window-height-footer).

So, there is a way that an element can have 100% height, but when does a lot of content expand there?

Obstacles:

  • I cannot use the flexbox model due to IE8 + (compatibility required).
  • I cannot use height: calc due to Safari and IE.
  • I can’t put everything in height: 100% due to the footer.
  • I can not put images because of reputation.
+5
source share
3 answers

I think this might be what you are looking for:

Demo: http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

This is a simple script that forces your footer to be inserted at the bottom of the page, but as soon as you add more content, it will go down with it. (Demo)

This is an example using a script: (I also added fixed navigation) HTML:

 <div id="wrapper"> <div id="header"> <div id="nav"></div> <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- makes sure the first content doesn't dissapear beneeth the nav> </div><!-- #header --> <div id="content"> Copy this to add content<br><br><br><br> Copy this to add content<br><br><br><br> Copy this to add content<br><br><br><br> Copy this to add content<br><br><br><br> </div><!-- #content --> <div id="footer"> </div><!-- #footer --> </div><!-- #wrapper -->

CSS

 html, body { margin:0; padding:0; height:100%; } #wrapper { min-height:100%; position:relative; } #header { background:#ededed; padding:0px; } #nav{ width: 100%; height: 50px; position: fixed; background-color: green; } #content { padding-bottom:100px; /* Height of the footer element */ } #footer { background:#ffab62; width:100%; height:100px; position:absolute; bottom:0; left:0; }

Try: https://jsfiddle.net/krjoqfru/

+1
source

I do not know if I understand you correctly. Aren't you a sticky footer?

 html, body { height: 100%; } #wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; } #footer, #push { margin: 0 auto; height: 50px; } 
 <body> <div id="wrap"> your content goes here <div id="push"></div> </div> <div id="footer">Your footer</div> </body>
0
source

Hope this helps you.

 * { margin: 0; padding: 0; } body { height:100%; width: 100%; position: absolute; } header { height: 50px; width: 100%; position: fixed; } .principal { min-height: 100%; width: 100%; } footer { height:50px; width:100%; } 
 <header style="background: green;"></header> <div class='principal' style="background: red;"></div> <footer style="background: blue;"></footer>
0
source

More articles:


All Articles