title: Adjust top margin in layout file depending on Navbar height
body: <p>I have an ASP MVC Application and in the layout view file I added an image (400px x 400px).
  I set the class to img-respsonsive and added some padding to the image.</p>
  
  <p>I want to div that contains the <code>@RenderBody()</code> method to automatically adjust the <code>margin-top</code> style so it moves down depending on the height of the navbar header.</p>
  
  <p>I use maax-width of %20 percent(80px) and I set the margin-top to the max value which works.  But I would like to not have so much whitespace if possible.</p>
  
  <p>How can I do this?</p>
  
  <p>Here is the source code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;img class="img-circle" src="@Url.Content("~/Content/Images/IdeaConTempLogo.png")" style="max-width: 20%; padding: 9px 15px 8px;"/&gt;
              @Html.ActionLink("Brand", "Home", "Home", new { area = "" }, new { @class = "navbar-brand" })
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- TODO: Adjust the top margin to automatically to add space depending on navbar height --&gt;
  &lt;div class="container body-content" style="margin-top:80px"&gt;
      @RenderBody()
      &lt;hr /&gt;
      &lt;footer&gt;
          &lt;p&gt;Copyright &amp;copy; @DateTime.Now.Year - IdeaCon All Rights Reserved&lt;/p&gt;
          &lt;p&gt;&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>