bootstrap 3 - fixed side bar to full column width - html

Question

I have two columns (col-md-8 and col-md-4). The second column contains a fixed side bar. I want the side bar to be 100% width of the col-md-4 column. The black box as seen in the image below is the second column.
I have tried width 100% but it does not work.
Here's my HTML.
.col-md-4 {
border-style: solid;
}
.sidebar-nav-fixed {
height: 100%;
width: 15%;
text-align: center;
}
.well {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="">
<h1>Hello, world!</h1>
</div>
</div>
<div class="col-md-4">
<div class="sidebar-nav-fixed affix">
<div class="well" id="world">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!--/.well -->
</div>
</div>
</div>
<!--/row-->
</div>

Answer 1

position:fixed element is supposed to define everything (including width) in relation to the viewport.
The only way in css to set width according to it's parent div is width:inherit
or if jquery is allowed you can use following code.
$(document).ready(function() {
var new_width = $('.col-md-4').width();
$('.sidebar-nav-fixed').width(new_width);
})
$(window).resize(function(){
var new_width = $('.col-md-4').width();
$('.sidebar-nav-fixed').width(new_width);
})
.col-md-4 {
border-style: solid;
}
.sidebar-nav-fixed {
height: 100%;
width: 15%;
text-align: center;
}
.well {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="">
<h1>Hello, world!</h1>
</div>
</div>
<div class="col-md-4">
<div class="sidebar-nav-fixed affix">
<div class="well" id="world">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!--/.well -->
</div>
</div>
</div>
<!--/row-->
</div>