How to Make Sidebar with Same Height as The Content Div

How to make sidebar with same height as the content div?

You can do that by displaying the #container as table and displaying #content and #sidebar as table-cells:

#container {
    border:1px dashed #000;
    display: table;
    width: 100%;
}
#content, #sidebar {
    display: table-cell;
    width:50%;
}

Check your updated Fiddle.

How to make my side bar same height as my content?

If you have the possibility, you can restructure your HTML to wrap your content and sidebar in a container. This container, with a display: flex property and align-items: stretch should do the trick for you.

    #header {      margin: 0;      padding: 10px;      text-align: right;      background: blueviolet;    }
    #container {      display: flex;      align-items: stretch;    }
    #sidebar {      flex: none;      width: 190px;      background: orange;    }
    #content {      padding: 10px;    }
    #footer {      margin: 0;      padding: 10px;      text-align: center;    }

<div id="header">  login</div><div id="container">  <div id="sidebar">  </div>  <div id="content">  Lorem ipsum dolor sit amet  </div></div><div id="footer">©</div>

How do I make my sidebar height adjust to the content?

• Make the sidebar fixed however I am not sure how will the content
  (children of the main wrapper) will adjust if the sidebar is
  minimized/expanded.

To achieve this you need to create a global state with useContext, to adjust two separate components. And then change the active class of the parent element .content-wrapper. This will be a trigger the .sidebar, .sidebar-btn and .content components. Make some css changes to the css file.

Bootstrap 4 - How to keep a sidebar same height as responsive square?

This is definitely possible with only pure CSS. Alright, the premise of this is simple. You want for your row to always take the height of the responsive image and not the long list of thumbnails as you mentioned.

We need to tell the browser to only look at the height of the image and ignore the thumbnail list, and to do that we remove the thumbnail list from the document flow with position absolute.

I replicated your bootstrap layout, albeit more simply, and implemented what I just mentioned. I set the sidebar positioning to relative with vertical overflow to scroll. I styled it with a fixed flex width with no grow or shrink and then placed another absolute positioned container div to house the thumbnails.

I then added a second column where the main image will be. All that was left was to add the img-fluid bootstrap style to make the image responsive and voila!

Working fiddle here: Click Here

And this is the code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
  .container-overrides {
    background: #ccc;
    margin: 20px auto;
    max-width: 500px !important;
  }

  .sidebar {
    position: relative;
    overflow-y: scroll;
    flex: 0 0 50px;
  }

  .sidebar .image-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;
  }

  .sidebar img {
    display: block;
    margin: 0 auto 10px;
  }

  .sidebar img:last-of-type {
    margin: 0 auto;
  }
  .main{
    background:#ccc;
  }
  .main img {
    height: auto;
    border: 1px solid red;
  }

</style>

<div class="container p-0 container-overrides">
  <div class="row no-gutters">
    <!-- Responsive Sidebar -->
    <div class="sidebar bg-dark p-2">
      <div class="image-container">
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
      </div>
    </div>
    <!-- Main Image Container -->
    <div class="col p-2 main">
      <img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
    </div>
  </div>
</div>

Using jQuery to make sidebar same height as content

This is a classic problem where the javascript renders as soon as the DOM is ready but all the resources have not downloaded, which could include the images. In such a scenario the calculations happen with initial height, but as the resources start loading there is a mismatch of height between the two elements.

Try to use:

$(window).on("load",function(){
    // your code goes here
});

Hope this helps you.

---

Related Topics