treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

How to get the actual height of a parent div?

  • jquser12
    Permalink to comment #

    If I have a child element with some margin established, its parent won't return its actual height ( wont't count the child's margin, I mean) when using the command .outerHeight(), unless I establish either (not all) of the following properties to the parent div:

    border:1px solid; overflow:hidden display:table-cell;

    Why is that? Which of these properties should I use (..and why '-')? Should I do something different? Ty in advance. Here's the code:

    <!DOCTYPE HTML>
<head>
      <title>Sample</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">    </script>

      <style>
      * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
      }

         .form { margin:2em; }
         .fieldcontain label{
             width:8em;
             text-align:right;
             display:inline-block;
             margin: 0 0.5em 0.8em 0;
         }
         #login{

         }
      </style>

      <script type="text/javascript">
        $(document).ready(function(){
      var alturaAtual = $('#login').outerHeight()
      alert(alturaAtual)
        })
      </script>

</head>
<body>
      <div id="login" style="width:25em;">
     <form class="form" action="#">
           <div class="fieldcontain">
           <label for="username">
                  User Name</label>
           <input type="text" name="username" id="username"/>
           </div>
           <div class="fieldcontain">
           <label for="senha">Password</label>
           <input type="password" name="senha" id="senha"/>
           </div>
     </form>
     <br />dfdfdf
     <br />dfdfdf
     <br />dfdfdf
     <br />dfdfdf
     <br />dfdfdf
</div>
<input type="button" value="Click here" />
</body>
</html>

    So, if I put either of those css properties i talked about earlier(in #login selector) it would work out fine , but not sure why '-'. In this example the form element(.form selector) has a margin that causes its div parent not to calculate its height right.

  • wolfcry911
    Permalink to comment #

    That's correct behavior. And for the record, padding-top would also work. The child's margin extends outside of the parent unless the parent is given a new block formatting context. You've hit most of the ways to do that. I personally would use the overflow: hidden;

  • jquser12
    Permalink to comment #

    Ty wolfcry911, but what do you mean by "new block formatting context", and how do these properties accomplish that?

    Just to be sure: the property "display: block" doesn't fix my problem, so this property doesn't accomplish the "new block formatting context" criterion you said?

    Ty =]

  • wolfcry911
    Permalink to comment #

    this might help explain it: https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context

  • neerukool
    Permalink to comment #

    If you want everything of the div to be calculated, pass value 'true'.

    so your code will look like: .outerwidth(true) or .outerHeight(true).

    It will calculate the margin too. :)

  • wolfcry911
    Permalink to comment #

    no it won't. The parent doesn't have the margin and doesn't encompass the child's margin - unless you establish a new BFC

  • jquser12
    Permalink to comment #

    Ty you all guys, think I have finally figured it out. I tried checking the website you suggested wolfcry911, but couldn't grasp much from there, so i tried searching some other sites (many.. so can't ref them all here) besides some of the css official documentation (http://www.w3.org/TR/CSS2/box.html) (http://www.w3.org/TR/CSS2/visuren.html) and the conclusion I had figured out (I think) is:

    Since I dont include padding, border, or anything else before the form's margin, its margin will collapse with the #login's margin, so if I had included a "padding: 1px" property in #login, it would also work out, since the collapse wouldn't be allowed anymore =]. That is also the reason why the 'border' property I mentioned earlier would also work. As for the display properties, it's as wolfcry911 said: they create a new block formatting context, which doesn't allow margin collapsing either, and that's why it works: the form's margin remains inside the #login block, instead of out of it, collapsed with its own margin, so the outerHeight can be calculated as I expected =]

    In the end, it was all about "margin collapsing" properties, which by this day I'd never heard about '-'

    Ty again guys o/

Add a Comment