Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post

    Extend div's height down to bottom of container

    On this page, I'd like the two divs, red and green, to extend to the bottom of the page.

    How do I do this?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    You have done it.
    Evolution - The non-random survival of random variants.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    I should of written: extend down to the botttom of the page.

    I'd like #container to have a minimum height of 100% of the browser height.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,455
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Everything that #container is contained inside of needs to have a height of 100% of its containe including the html tag.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Done. No change. :-(

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    I know of no way to do this in CSS, but it can be done using javascript. Change the last lines of script ( so it runs after the page is rendered) to this:
    Code:
    <script>
    var h = window.innerHeight;
    document.getElementById("container").style.height = h+"px";
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • #7
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    I don't get it. Didn't you already achieve the effect you want?
    My signature :)

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    I don't get it. Didn't you already achieve the effect you want?
    I'd like the two divs to extend to the bottom of the page.
    They are not currently extending down to the bottom of the page.

  • #9
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    felgall suggested yesterday, put everything as height:100% - your #container height is "auto" still. Change that...

    Dave

  • #10
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Oh I see. It extended to the bottom on Chrome for me. I didn't realize that it failed to do so on other browsers.

    Is there a reason why you didn't follow felgall's advice and put height:100% on the container? Your height is set to auto.

    You should also declare a doctype.

    Code:
    <!DOCTYPE html>
    Edit: Dang it. I was too slow!
    My signature :)

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    I don't want to set height as 100% because there may be an occasion when the page text extends the green div down below the fold, meaning #container would have to be taller than 100%.

    If I set #container's height to be 100%, in the situation above the text will be cut off.

    That's why I want #container's min-height to work, but it is not.

  • #12
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    Have you looked at the "faux columns" method?

  • #13
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Quote Originally Posted by SRD75 View Post
    I don't want to set height as 100% because there may be an occasion when the page text extends the green div down below the fold, meaning #container would have to be taller than 100%.

    If I set #container's height to be 100%, in the situation above the text will be cut off.

    That's why I want #container's min-height to work, but it is not.
    It will or should work if you set height to 100%.

    You set the container's display as table. "min-height" doesn't work for tables. It returns undefined. On the other hand, height for tables basically works like min-height so you should be setting height to 100%.
    My signature :)

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Code:
    <style type="text/css">
    html {
    	height: 100%;
    }
    body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    #container {
    	width: 100%;
    	display: table;
    	height: 100%;
    }
    #left {
    	width: 30%;
    	display: table-cell;
    	vertical-align: bottom;
    	border-right: 1px solid #000;
    	background-color: #ff0000;
    	padding: 0 0 4% 4%;
    	height: 100%;
    }
    #right {
    	width: 70%;
    	display: table-cell;
    	padding-left: 11%;
    	background-color: #00ff00;
    	padding: 4% 0 4% 11%;
    	height: 100%;
    }
    #content {
    	width: 640px;
    }
    </style>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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