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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making the Entite Box Fit 100%

    Anyone figured out a trick for implementing the following:

    Elementís Margins + Elementís Height = Containers Height

    when (1) the Containers Height is Variable/Unknown (e.g., 100%)
    And (2) the margins are fixed (e.g., 10 px)?

    As far as I can tell CSS has nothing to say you want the element's entire box (i.e., its own height + margins + padding + border) to fill the container's height unless everything is in percentages.

    Am I correct? Can this not be done without JavaScript or hacks in the HTML?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Elementís Margins + Elementís Height = Containers Height
    I think this is correct in the normal flow (unless there is some float or absolute position)
    Anyway posting your relevant code / link to your page would be useful to say more on this.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by amcalab View Post
    As far as I can tell CSS has nothing to say you want the element's entire box (i.e., its own height + margins + padding + border) to fill the container's height unless everything is in percentages.
    Short Answer: This is not possible without scripting.

    Long Answer: A CSS3 Box Model module draft [1] has box-height and box-sizing properties that could be used for this if youíre able to convert the margins on the child element into padding on the parent (container) element.

    I know that Mozilla Firefox and Opera have implementations via -moz-box-sizing and box-sizing, respectively. Youíd have to resort to scripting for browsers not supporting these properties though; you could also use CSS expressions (scripting disguised as CSS) for Internet Explorer.

    Note, however, that these properties were removed in the latest draft of the module [2]. Between the current and last iterations, the module changed from the Box Model module into the Basic Box Model module, so the properties could potentially be resurrected in the planned CSS3 Extended Box Model module though (a draft hasnít been released yet).

    References
    1. http://www.w3.org/TR/2002/WD-css3-bo...#the-box-width
    2. http://www.w3.org/TR/2007/WD-css3-box-20070809/
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I thought I might have been missing something.

    I hope future versions of CSS support simple expressions (e.g., = 100% - 10px).

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by amcalab View Post
    I hope future versions of CSS support simple expressions (e.g., = 100% - 10px).
    CSS3 already has that. I forgot about the CSS3 Values and Units moduleís calc(expression) value [1]. Unfortunately, I donít know of any implementations and the specification is still in W3C Working Draft status.

    References
    1. http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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