бутстрап 3 - фиксированная боковая полоса до полной ширины столбца

Question

У меня есть две колонки (col-md-8 и col-md-4). Второй столбец содержит фиксированную боковую панель. Я хочу, чтобы боковая полоса была на 100% шириной колонки col-md-4. Черным ящиком, как показано на изображении ниже, является второй столбец.

Я пробовал ширину 100%, но он не работает.

Вот мой 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"><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.well --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/row--> 
 
</div>

Answer 1

position:fixed элемент должен определить все (включая ширину) по отношению к области просмотра.

Единственный способ в CSS, чтобы установить ширину в зависимости от его родителей DIV является width:inherit

или если JQuery разрешено вы можете использовать следующий код.

$(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"><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li class="nav-header">Sidebar</li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      <li><a href="#">Link</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.well --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/row--> 
 
</div>