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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    make a div height 100%

    http://www.mathannotated.com/index.html

    The main contents box surrounded by a navy border - how to make its height aways 100% of page? This doesn't seem to work; just me?

    Code:
    div.content {
        border: #333399 solid 3px;
        clear: left;
        padding: 1em;
    	height: 100%;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to use the faux column technique.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You'd need to use the faux column technique.
    There is another technique I have been trying which I am more favourably disposed towards. However it does not work for me: are you familiar with setting the parent div (html or body) to a min-height of 100% which apparently allows the child div to inherit a height dimension?

    Besides it's the border that I want, not the background to span right down to the bottom of the page, so not sure how to make the faux background technique work for me.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    i could still use some help. visit http://www.mathannotated.com/index.html and see if you can help extend the central column's borders down to bottom of page without the use of a faux background.

    CSS:
    Code:
    div.content {
        border: #333399 solid 3px;
        clear: left;
        padding: 1em;
        min-height: 100%;
    }
    Edit: Note that I don't want the borders to actually be extended upwards to the top of the page; the upper border is already where I want it, for obvious reasons when you've seen it.

    Edit: The contents of the page height is dynamic so setting a fixed hight is not an option.
    Last edited by ptrcao; 12-15-2010 at 08:09 PM.

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    I'm reading everywhere online that if you set the parent div to 100% that solves the problem.

    My code is clean but still this approach is not working for me.

    I want the border on this:
    Code:
    div.content {
        border: #333399 solid 3px;
        clear: left;
        padding: 1em;
        min-height: 100%;
    }
    It's parent, also the parent of two other child divs one of which is taller than the div I want the border on, is set as
    Code:
    div.heightonehundred {
    height: 100%;
    overflow: hidden;
    }
    http://www.mathannotated.com/index.html

    According to online guides this should work. Well, not for me.

    Note: Mine is a variation of the standard case as I do not want the div to span the entire page, only from the horizontal menu to the bottom of the page.

    Anybody?
    Last edited by ptrcao; 12-15-2010 at 08:20 PM.

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts
    This problem is not yet resolved. Bump.


  •  

    Posting Permissions

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