title: Fixed Bootstrap navbar to top of dynamic width DIV - not full width of page
body: <h2>My problem</h2>
  
  <p>I am using Bootstrap 3.0 and need to use a fixed navbar, which will stay at the top of a DIV on the left side and NOT extend all the way 100% of the width of the window (like I usually see Bootstrap's example do). I have some very simple code below, using ASP.NET MVC 4 which will explain the RenderSection areas. </p>
  
  <p>I have included an image which shows what I am trying to do. Currently the navbar is only extending about 75% of the left side container, not the full 100% of that left side container like I want it to.</p>
  
  <p>Like I said above, I want the navbar to be fixed so when you scroll it stays in one spot within that left DIV.</p>
  
  <p>Any tips/hints would be greatly appreciated! Thanks!</p>
  
  <p>I also saw this question (<a href="https://stackoverflow.com/questions/12571540/navbar-fixed-to-top-but-not-full-width">Navbar fixed to top but not full-width</a>) but I do not want to have to dynamically maintain this navbar with a fixed pixel width in media queries. I'd prefer it to fill out the entire left side DIV that contains it. </p>
  
  <p><img src="https://i.imgur.com/YLzmkHp.jpg" alt="image which outline my issue(s)">
  (<strong><a href="https://i.imgur.com/YLzmkHp.jpg" rel="nofollow noreferrer">http://i.imgur.com/YLzmkHp.jpg</a></strong>)</p>
  
  <h2>My code</h2>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;!--LEFT SIDE--&gt;
          &lt;div class="col-md-9"&gt;
              &lt;div data-spy="affix" data-offset-top="0"&gt;
              &lt;nav class="navbar navbar-default" role="navigation"&gt;
                  &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul role="menu" class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;form role="search" class="navbar-form navbar-left"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input type="text" placeholder="Search" class="form-control"&gt;
                          &lt;/div&gt;
                          &lt;button class="btn btn-default" type="submit"&gt;Submit&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;    
              &lt;/div&gt; &lt;!--end data-spy=affix--&gt;
  
              &lt;!--the LeftSide below just contains basic placeholder text in a &lt;p&gt; tag--&gt;
              @RenderSection("LeftSide", true)
  
          &lt;/div&gt;
          &lt;!--RIGHT SIDE--&gt;
          &lt;div class="col-md-3"&gt;
  
              &lt;!--the RightSide below just contains basic placeholder text in a &lt;p&gt; tag--&gt;
              @RenderSection("RightSide", true)
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>Partially Solved (update)</h1>
  
  <p>I was able to solve my main problem that I listed above by using this bit of jQuery</p>
  
  <pre><code> $(window).resize(function () {
       var w = $("#leftSide").width();
       $("#navWrapper").css("width", w);
   });
  </code></pre>
  
  <p>But this does <strong>not</strong> work within an iFrame. </p>
  
  <p>If anyone has any insights on solving this for use in an iFrame, it'd be greatly appreciated.</p>