Results 1 to 11 of 11

Thread: Minimum DIV Height CSS

  1. #1
    Spanked Member
    Join Date
    Oct 2003
    Posts
    1,430
    Thanks
    11
    Thanked
    26 times in 23 posts

    Minimum DIV Height CSS

    Ive started to try my hand at websites, using CSS.

    This is (probably) something really simple but even after trawling the web for a fix, I still can't get this working.

    The basic layout is a 800px width container DIV centered on the page, with a header DIV at the top in the container DIV, a content DIV below the header (still inside the container), and a footer DIV at the bottom of the container DIV. Very generic, si.

    What I'm trying to do is to set the minimum height (of the #container) to fill the screen - so that even if there is not a lot of content, the div will still extent to the bottom of the screen.

    Here's my code (might be a bit messy as I've tried bits of everything):

    Code:
    html {
          height:100%;
          }
    
    body {
          position:relative;
          min-height:100%;
           }
    
    * html body {
          height:100%;
          }
    
    #container {
          width:800px;
          margin-left:auto;
          margin-right:auto;
          border: 1px solid #003399;
          min-height:100%;
          height:auto;    <--- have tried 100% too
          float:none;
          }
    
    #container #header {
          position: relative;
          height:115px;
          }
    
    #container #content1 {
          background color: gold;
          color: #000099;    
          height: auto;   <---- have tried 100% too
          min-height: 100%;
          } 
    
    #container #footer {
         position: relative;
         bottom:0px;
    Sorry if there's any typos, I had to type it manually as the laptop's wireless isn't working atm.

    Everything is where I want it, no problems, it's just making it extend to the bottom of the screen for pages with little content....

    Any help appreciated, thanks in advance

  2. #2
    Senior Member
    Join Date
    Sep 2004
    Posts
    371
    Thanks
    44
    Thanked
    10 times in 9 posts
    As far as I know you can't do it. I've spent plenty of time, on more than one occasion, trying to find out how to do it and have never found a solution. I'm very interested to see a solution if there is one.

  3. #3
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by McClane View Post
    As far as I know you can't do it. I've spent plenty of time, on more than one occasion, trying to find out how to do it and have never found a solution. I'm very interested to see a solution if there is one.
    I never found a solution, especially considering that height of windows/monitors will vary. I just settled for having my page as large as it wants to be, with the footer below all the content.

    Incidentally, you might want to use em instead of px for your measurements - its better to use relative rather than absolute figures. (http://www.w3.org/QA/Tips/font-size)
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  4. #4
    Flak Monkey! Dorza's Avatar
    Join Date
    Jul 2003
    Location
    UK - South Wales
    Posts
    1,762
    Thanks
    34
    Thanked
    17 times in 15 posts
    • Dorza's system
      • Motherboard:
      • Asus P5B Deluxe - WiFi
      • CPU:
      • Q6600 @ 3.06Ghz
      • Memory:
      • 2GB Crucial
      • Storage:
      • 500GB Samsung SpinPoint
      • Graphics card(s):
      • Geforce 9600GT
      • PSU:
      • Cosair HX520W
      • Case:
      • LianLi something something or other
      • Monitor(s):
      • Eizo FlexScan S1910 (1280*1024)
      • Internet:
      • 2mb Virgin (when they want to give me that: else 1mb)
    It is doable but it's not a perfect solution: Here eyeball the source on that. Change the value of ".pad" to one you require.

    EDIT: Ignore the javascript at the bottom of the source code. It's something the freewebs enforce on their free hosting accounts.
    Last edited by Dorza; 22-04-2007 at 01:31 PM.

  5. #5
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by Dorza View Post
    It is doable but it's not a perfect solution: Here eyeball the source on that. Change the value of ".pad" to one you require.

    EDIT: Ignore the javascript at the bottom of the source code. It's something the freewebs enforce on their free hosting accounts.
    The only problem with that is that it creates ugly padding when the page is taller than the screen height (at least, it does in Gecko - I've just tried it)
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  6. #6
    Spanked Member
    Join Date
    Oct 2003
    Posts
    1,430
    Thanks
    11
    Thanked
    26 times in 23 posts
    Incidentally, you might want to use em instead of px for your measurements - its better to use relative rather than absolute figures. (http://www.w3.org/QA/Tips/font-size)
    Thanks for the tip, I'm just getting accustomed to CSS at the moment, better to pick these things up early


    Dorza, thanks for your workaround - as mike has said, if the page is taller than the screen height (for which quite a few pages do already), then it pads extra (as you said, it's not perfect)....although maybe I could try it with JavaScript.

    Maybe get the height properties of the content container and pad it if it's less than a certain height%? I'm pretty new to JavaScript as well, so I probably wont do it!

  7. #7
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    It would be more useful to indicate what you're trying to do visually on-screen as there are various cheats and workarounds for this depending on the effect you're trying to achieve. If the div doesn't extend to the bottom and there is no border or bg colour then it doesn't matter so I'm assuming you have an effect in mind. Can you post the HTML along with the CSS and then we can possibly give you a non JavaScript answer.

    Looking at your CSS it's worth bearing in mind that a height of 100% is the height of the containing object. If you're div is directly inside the body tag then it won't work as body is the size of the content, not the size of the window. Setting a height of 100% in the html or body tag won't help you in this instance

  8. #8
    Spanked Member
    Join Date
    Oct 2003
    Posts
    1,430
    Thanks
    11
    Thanked
    26 times in 23 posts
    It would be more useful to indicate what you're trying to do visually on-screen as there are various cheats and workarounds for this depending on the effect you're trying to achieve. If the div doesn't extend to the bottom and there is no border or bg colour then it doesn't matter so I'm assuming you have an effect in mind. Can you post the HTML along with the CSS and then we can possibly give you a non JavaScript answer.
    My laptop's wireless is out (indicated above), so posting the HTML might take a bit of time

    I basically have (this is barebones) :

    Code:
    <html>
    <head>
          <link href="layout.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
          <div id="container">
                <div id="header">
                    header content
                </div>
    
                <div id="content">
                    Content
                </div>
    
                <div id="footer">
                    Footer
                </div>
    
           </div>
    
    </body>
    </html>
    There are border and bg colours involved....Sorry, even trying to describe it is a pain, I'm going to see if I can get a flash drive or something.....

    Looking at your CSS it's worth bearing in mind that a height of 100% is the height of the containing object. If you're div is directly inside the body tag then it won't work as body is the size of the content, not the size of the window. Setting a height of 100% in the html or body tag won't help you in this instance
    I have to admit, I'm not 100% sure why those are in there - I picked up bits and bobs along my search for an answer and the code is very messy. It's just experimenting at this stage though.

  9. #9
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    It's hard to work out what you want but it might be something like the below. Works in Firefox and IE7 (although it isn't centred in IE)

    Code:
    <html>
    <head>
    	<style type="text/css">
    		body {
    			margin: 0;}
    		#container {
    			border: 1px solid #000000;
    			height: 100%;
    			margin-left: auto;
    			margin-right: auto;
    			width: 800px;}
    		#header {
    			background: #aaaaaa;
    			height: 115px;}
    
    		#content {
    			background: #efefef;
    			height: 100%;} 
    
    		#footer {
    			background: #aaaaaa;
    			height: 100px;
    			margin: -100px 0 0 0;
    			bottom: 0;}
    	</style>
    </head>
    <body>
          <div id="container">
                <div id="content">
    				<div id="header">
    					header
    				</div>
                    content
                </div>
    			<div id="footer">
    				footer
    			</div>
           </div>
    
    </body>
    </html>

  10. #10
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by Iain View Post
    It's hard to work out what you want but it might be something like the below. Works in Firefox and IE7 (although it isn't centred in IE)
    That doesn't seem to work in Gecko when the text in the page makes it longer than the height of the page - the content div covers and goes beyond the footer.
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  11. #11
    Spanked Member
    Join Date
    Oct 2003
    Posts
    1,430
    Thanks
    11
    Thanked
    26 times in 23 posts
    That doesn't seem to work in Gecko when the text in the page makes it longer than the height of the page - the content div covers and goes beyond the footer.
    It doesn't in IE7.....but as mentioned it's not centered - even though this rendering is preferred it's probably through some sort of non-compliance to standards

    Why can't every browser just do what they're being told what to do!

    God damn.

    Not had time to look at this anymore today, have spent all day on Java.....now

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. CSS Guru's inside please.
    By Vini in forum Software
    Replies: 7
    Last Post: 27-03-2006, 10:00 PM
  2. How do you make a div 100% page height?
    By Gunbuster in forum Software
    Replies: 2
    Last Post: 25-05-2005, 03:19 PM
  3. CSS IE hack needed
    By yamangman in forum Software
    Replies: 6
    Last Post: 12-04-2005, 08:37 PM
  4. Height Kills
    By TeePee in forum Automotive
    Replies: 5
    Last Post: 01-12-2004, 04:28 PM

Posting Permissions

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