Creating a fixed sidebar in Bootstrap 3 that spans the full width of the column

I'm working with two columns - col-md-8 and col-md-4. In the second column, I have a fixed sidebar that I want to be 100% width of the col-md-4 column. The black box in the image below represents the second column.

Despite trying setting the width to 100%, it's not working as expected.

https://i.sstatic.net/vn1mr.png

Below is my current HTML code:

.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>

htmlcsstwitter-bootstrap

Answer №1

position:fixed property is used to ensure that an element is always positioned in relation to the viewport, including its width.

In CSS, the only way to set the width of an element based on its parent div is by using width:inherit.

If you have jQuery available, you can also achieve this with the following code snippet.

$(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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

javascripthtmljquerycsscss-animations

Troubleshooting problems with TranslateZ performance on mobile devices

While attempting to incorporate the code found at http://codepen.io/keithclark/pen/JycFw, I encountered significant flickering and delays in Chrome when using mobile devices. #slide1:before { background-image: url("http://lorempixel.com/output/abstract ...

htmlcssmobile

Avoiding page refresh while submitting a form can be tricky, as both e.preventDefault() and using a hidden iFrame seem

I've been stuck on this issue for a while now, scouring Stack Overflow and Google for solutions, but nothing seems to be working. My main goal is to avoid page reloads after uploading a file because it resets the dynamic HTML I need to display afterwa ...

javascripthtml

What is the reason behind HTML IDs being displayed as global variables in a web browser?

Browser exposes HTML IDs as global variables. <span id="someid" class="clsname1 clsname2 clsname3"></span> If you have the above HTML snippet, you can access a global variable called someid. You can interact with it in your console like this: ...

javascripthtml

Leverage a single property from a CSS class within another CSS class

I am facing an issue where I need to utilize one property from a CSS class in another CSS class. .class_a {margin:10px; width: 360px; float: left; color:#ffffff; ...etc...} .class_b { use the margin property of .class_a } Only utilize the margin propert ...

css

The enhancement of clickable link padding

I'm having an issue with the padding around the link in my dropdown menu not being clickable. The text itself works fine when I hover over it, but the surrounding padding is inactive. I tried styling it as an inline-block as suggested, but that did no ...

csshyperlinkpadding

Using setAttribute will convert the attribute name to lowercase

When creating elements, I use the following code: var l = document.createElement("label");. I then assign attributes with l.setAttribute("formControlName","e");. However, a problem arises where the setAttribute method converts formControlName to lowercase ...

javascripthtmlangularformsdom

Disable browser autocomplete for Material-UI TextField

I am currently using Material UI version 0.20.0 and I am facing an issue where I need to prevent the password from being saved for a user in a TextField. I tried adding props to the TextField with autocomplete='nope' since not all browsers suppor ...

htmlformsinputautocompletematerial-ui

What is the best way to implement an if-else structure in this code?

Can anyone help me with converting this code into an if/else statement? I want it to display certain content if 'Rental' is true, and other content if it's false. The PHP tags are making it difficult for me to follow. <?php if( get_ ...

phphtml

Tips for increasing the size of the SVG icon within Material UI iconButtons

Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...

csssvgreactjsmaterial-designmaterial-ui

Guide to extracting and utilizing a JSON object received from the parent page

Hello, I've been searching online for quite some time and can't seem to find a solution to my question. If anyone could help, I would greatly appreciate it. Below is the code I am working with: <ion-content> ...

htmljsonangularjs

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

htmlangulartypescript

What steps can be taken to enlarge the select button within a <select> field?

Is there a way to enlarge the size of the downward-pointing arrow button within a <select> element? Here is an example of what my code looks like: <select> <option>Select City</option> <option>City1</option> <o ...

htmlcss

Extracting the magnifying glass from the picture

After implementing a function to add a magnifying glass (.img-magnifier-glass) on button click, I am now looking to remove the glass by clicking the "cancel" button. However, I am unsure of how to write this function to interact with the "magnify" function ...

javascripthtmlcssfunction

Parsing string to JSON object and extracting specific information

In my code, I have a variable named "response" that contains the following string: {"test": { "id": 179512, "name": "Test", "IconId": 606, "revisionDate": 139844341200, "Level": 20 }} My goal is to extract the value of the id key and store ...

javaandroidhtmljson

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

One issue I encountered was that when I generated page number buttons at the bottom of a page, the onclick event only worked with the last button created. Below is an example of how the page buttons were displayed: https://i.stack.imgur.com/wHwI0.png ...

javascripthtml

In search of a mobile web UI framework solely built with CSS styling

Currently in search of a CSS framework that specializes in styling form elements and lists for optimal small screen use. The ideal framework must be CSS only, requiring minimal to no JavaScript. Something along the lines of Twitter Bootstrap would be per ...

htmlcssmobile

Exploring the power of CSS grid in React/Gatsby for creating dynamic layouts with varying numbers of columns in each

I need help creating a dynamic grid layout where the number of columns alternates between rows. For example, I want the first row to have one column, the second row to have two columns, and so on. Right now, my grid only has two columns per row. Does anyon ...

cssreactjscss-gridgatsby

Selections made from the dropdown menu will automatically generate additional fields in the

The code I'm working with is too lengthy to post in its entirety, so here is the JSFiddle link instead: https://jsfiddle.net/c0ffee/pew9f0oc/1/ My specific issue pertains to this screenshot: https://i.sstatic.net/swLqN.png Upon clicking on the dro ...

htmljquerycss

The div is not displaying the background image as intended

.cover-image { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } <div class="cover-image" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> I&apo ...

htmlcss