SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set height to 100%?

    So how to set height to 100%, like width, so automatically fits to use's monitor and there is no more than that or less than that.

    Header is always on top, footer always on bottom and main section is between! On every screen!

  2. #2
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I think by doing the following or similar:

    Code:
    #header{height:20%;}
    #body{height:60%;}
    #footer{height:20%;}

  3. #3
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have header fixed height 100px and width 100%. No footer. So main section is the rest of body. I tried to overflow it with some content and when I did it I got height more than 100%.

    Is there any way doing this via JavaScript, first detect user's body height, and this detected height set as body's max-height?

  4. #4
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, I think you are into some trouble with this approach if header has fixed height and I would never recommend fixing it with JS just as a matter of keeping things as clean as possible and not letting down users without JS. Maybe we should ask the question: why do you want to do this? and perhaps we can come out with a better approach.

    cheers

  5. #5
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually by thinking a bit I realized the solution. It is perfectly possible if you do something like:


    Code:
    #header{
    position:relative;
    height:100px;
    width:100%;
    }
    
    #body{
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Andres Vaquero View Post
    Actually by thinking a bit I realized the solution. It is perfectly possible if you do something like:


    Code:
    #header{
    position:relative;
    height:100px;
    width:100%;
    }
    
    #body{
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
    }
    Hi,

    That will only work as long as you have set html and body to height:100% and then include an inner container set with min-height:100% and position:relative and then place the absolute element at the bottom of that inner container. You would then need to preserve the space that the absolute element takes up or content will run over the top.

    A better approach is to use the "sticky footer" method as explained in The CSS FAQ (which should be your first stop). You should also read the section on 100% height also as it is not such a simple subject.

    The sticky footer method shown above is the most versatile around (since 2003) and works in more browsers than any other method but you must follow the details correctly.

    If you get stuck thne just shout

  7. #7
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul I think I did that here without doing what you said and I believe it is cross browser, please check if you can:

    http://vaqueroarquitectos.com/

  8. #8
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it Paul, thanks a lot!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Andres Vaquero View Post
    Hi Paul I think I did that here without doing what you said and I believe it is cross browser, please check if you can:

    http://vaqueroarquitectos.com/
    That should work for what you want but not for what the original OP was enquiring about.

    All you have done is placed something at the bottom of the viewport (not the document). If you were to add real content:

    e.g.
    Code:
    <div class="body_wrapper">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    You would soon see that the absolute element just scrolls away as the content goes down the page. However for the requirements on your page with no content apart from that image then it should work fine.

  10. #10
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why this is not working?

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    text-align:center;
    }
    #outer{
    width:100%;
    margin-top:-50px;
    min-height:100%;
    background:blue;
    }
    header{
    width:100%;
    height:50px;
    background:red;
    margin-top:50px;
    }
    section{
    background:yellow;
    }
    footer{
    height:50px;
    width:100%;
    background:green;
    }

    </style>
    </head>

    <body>

    <div id="outer"><header>
    </header>
    <section>
    </section></div>
    <footer>
    </footer>

    </body></html>

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Because the 50px top margin collapses on to the wrappers margin and cancels it out. Use padding-top on the header and it will work.

    It looks as though you are trying to do a sticky footer so please read this first as there are 10 years of refinement gone into this . All the issues and details are explained in detail so read carefully as most of the other sticky footers you see around don't work properly in one browsers or another.

    If you are using the html5 elements then you must have the shiv for IE and remember to set them all to display:block - even when testing.

  12. #12
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will be there any changes in HTML5 about this question? Any easier way to do this?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by godfather999 View Post
    Will be there any changes in HTML5 about this question? Any easier way to do this?
    What has html5 got to do with it?

    It's just CSS that we are talking about. You use the bricks and then you build your house. You can build a good house or a bad house but its still the same bricks.

    CSS provides the tools you need to build what you want but there are of course some CSS3 modules that will help with building these types of things (such as flexible box layout etc) but are not ready for prime time yet.

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    What has html5 got to do with it?

    It's just CSS that we are talking about. You use the bricks and then you build your house. You can build a good house or a bad house but its still the same bricks.

    CSS provides the tools you need to build what you want but there are of course some CSS3 modules that will help with building these types of things (such as flexible box layout etc) but are not ready for prime time yet.
    With Microsoft heavily pushing upgrades you could argue display: table; is ready for prime time, if you're happy with IE6/7 not getting a sticky footer.
    Code html5:
    <!doctype html>
    <html>
    <head>
    <style>
    html, body {
    	margin: 0;
    	height: 100%;
    }
    #wrap {
    	display: table;
    	height: 100%;
    }
    #header, #footer, #content { display: table-row }
    #header, #footer {
    	height: 50px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    	<div id="header">
    		<h1>Header</h1>
    	</div>
    	<div id="content">
    		<p>Content</p>
    	</div>
    	<div id="footer">
    		<p>Sticky</p>
    	</div>
    </div>
    </body>
    </html>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    With Microsoft heavily pushing upgrades you could argue display: table; is ready for prime time, if you're happy with IE6/7 not getting a sticky footer.
    Yes display:table is getting closer to be of use now. Just waiting for IE7 to die and we're good to go

  16. #16
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code you gave it to me. The sticky footer. I set everything between header and footer in section (HTML5), and when I go to inspect element in Chrome and then click on section, it says its height decided by content inside, the height is not 100%? Why is that?

    Do you know what Im saying?

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Chromes inspect element isn't always right, yaknow. If you took the code given to you here and chrome is saying that, it's just wrong.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by godfather999 View Post
    This code you gave it to me. The sticky footer. I set everything between header and footer in section (HTML5), and when I go to inspect element in Chrome and then click on section, it says its height decided by content inside, the height is not 100%? Why is that?

    Do you know what Im saying?
    No

    I think that you are checking the height property as there is no height set for the wrapper in my code. It's height is set to the default which is auto which is why it can expand as its height is dictated by its content.

    There is a min-height:100% rule but that's not the same as height.

  19. #19
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    No

    I think that you are checking the height property as there is no height set for the wrapper in my code. It's height is set to the default which is auto which is why it can expand as its height is dictated by its content.

    There is a min-height:100% rule but that's not the same as height.
    You know what Im saying because you answered on my question.

    Can I do it using jQuery? Or in other programming language?

    Code I found
    $(window).resize(function(){
    var height = $(this).height() - $("#header").height() + $("#footer").height()
    $('#content').height(height);
    })

    $(window).resize(); //on page load
    Is this useful and good to use?

  20. #20
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Is this useful and good to use?
    No, don't use javascript for layout. That's what CSS is for.

    Read through the links Paul gave you.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think we've answered the question already unless we misunderstood.

    If perhaps you wanted a fixed height header at the top of the screen and a fixed height footer at the bottom of the screen and then the content in the middle stretches between the two with its own scrollbar then you can do that like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #content, #footer {
    	position:absolute;
    	top:100px;
    	bottom:100px;
    	overflow:auto;
    	width:100%;
    	background:blue;
    }
    #footer {
    	top:auto;
    	bottom:0
    }
    #header, #footer {
    	height:98px;
    	border-bottom:1px solid #000;
    	border-bottom:1px solid #000;
    	background:red;
    	overflow:hidden;
    }
    </style>
    </head>
    <!-- won't work in ie6 -->
    <body>
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
    </body>
    </html>
    It won't work in IE6 though (which shouldn't be a problem these days).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •