Styling your sidebar with CSS and Bootstrap to accommodate dynamic content with varying heights

How can I adjust the height of my sidebar block to match the height of the sidebar main block and the content block?

Check out this example image I created:

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

I'm currently using Bootstrap 4 and have experimented with grid/flexbox and relative/absolute positioning (making the sidebar absolute and the container relative). However, I'm struggling to set a percentage height on the blocks as they do not seem to respect it.

What is the best way to achieve this alignment?

Below is an example of my attempt using relative and absolute positioning (the original code is in PHP)

<div class="row position-relative">
       <div class="col-md-3 p-0"></div>
       <div class="col-md-3 p-0 position-absolute h-100">
           <div class="d-none d-md-block">
            <div id="boxsubmenu">
              <div class="level_0">

BLOCK 1 <-----
                  <a href="{CATALOG_LINK}" class="level_0">{TPL_LAN.LBL_CAT_MENU_TITLE}{MENU4.LABEL}</a>
                  <div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                  </div>
BLOCK 2 <-----
                  <a href="{CATALOG_LINK}" class="level_0">{TPL_LAN.LBL_CAT_MENU_TITLE}{MENU4.LABEL}</a>
                  <div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                  </div>

BLOCK 3 <-----
                  <a href="{CATALOG_LINK}" class="level_0">{TPL_LAN.LBL_CAT_MENU_TITLE}{MENU4.LABEL}</a>
                  <div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
       </div>
       <div class="col-md-9">
           <div class="row">
               <div class="col-xs-12 p-5 col-md-9" style="width: 100% !important;">
                   {PAGE_CONTENT}
               </div>
           </div>
       </div>
   </div>
cssflexboxgridstylesbootstrap-4

Answer №1

To create the basic layout, you can utilize flexbox:

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-col {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box {
  flex-basis: 30%;
}

.right-col {
  width: 70%;
}

.border {
  border: 1px solid red;
  box-sizing: border-box;
}
<div class="left-col border">
  <div class="box border"></div>
  <div class="box border"></div>
  <div class="box border"></div>
</div>

<div class="right-col border"></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

How can the object currently being dragged be chosen using JQueryUI Draggable?

Working with JQueryUI draggable, I am interested in applying styling to the draggable element while it is being dragged. Various attempts have been made using code like this: $(".ui-widget-content").draggable({ drag: function(event, ui) { $(this).cs ...

htmlcssjquery-uijquery-ui-draggable

Styling dates in React

How can I properly display the date in the correct format? I'm seeing the date displayed incorrectly on the screen as 32/03/2020, but the 32nd day doesn't exist. Below is the correct date format displayed in the image. I'm new to Reactjs, ...

cssreactjsreact-nativedatevalidation

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...

javascripthtmlcssbootstrap-5

Adaptable Semantic UI form design

Welcome, internet friends! If anyone out there has a moment to spare and is familiar with Semantic UI, I could really use some assistance... Currently, I am working on a form that looks great on larger screens like this: https://i.stack.imgur.com/cafc5.j ...

javascripthtmlcssresponsive-designsemantic-ui

Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...

javascriptjqueryhtmlcss

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked. HTML: <div id="1" class="divs" onclick="hide()"></div> <div id="2" class="divs" onclick="hide()"></div> <div id="3" cla ...

javascripthtmlcss

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions. Here&a ...

htmlcssreactjssassnext.js

What is the procedure to alter the color of XYChart in JavaFx?

How can I change the color of a bar chart? Does anyone have any tips on: How to adjust the color of line charts? How to assign a CSS class to series? public class CustomBarChart extends Application { @Override public void start(Stage stage) throws Ex ...

javacsschartsjavafxbar-chart

Using icons from Bootstrap on your local machine can be a valuable asset for

When using this particular method <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> The icon is visible with this reference: <button type="reset" class="btn btn-warning cancel"> <i ...

htmlcss

Div element with fixed position that dynamically adjusts its height according to the position of the

Currently, I am designing a website with two sidebars and a center wrapper for the main content. The sidebars will contain links that jump the user to different sections of the page. I have fixed the position of the sidebars so they stay visible as the use ...

javascriptjqueryhtmlcss

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

htmlcssbootstrap-5

The hover dropdown remains active even after the mouse has left

I've created a script for displaying a dropdown menu on small screens with a click (or tap on mobile), but I want it to change to hover when the screen size is larger. Here's my code: $(document).ready(function() { var open = false; ...

javascriptjquerycss

Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, maki ...

asp.netcssajax

Chrome not handling text wrapping within table cells properly

I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here: <form action="todos" m ...

htmlcsstwitter-bootstraphtml-table

Issues with the functionality of the accordion menu

I have implemented an accordion menu on my website. However, I am facing an issue where the 2nd menu always slides up when it gets loaded instead of sliding up after clicking on it. I want the behavior to change so that the sub menus elaborate only upon cl ...

javascriptjquerycss

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

javascriptjqueryhtmlcssreplacewith

The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...

htmlcssfontsfont-facelocal

Did the menu get shifted downwards on the mobile version by using bootstrap?

Here is the desktop version of a navigation bar. https://i.sstatic.net/e595L.png This image shows the mobile version after clicking on the hamburger button. https://i.sstatic.net/ng1tK.png I would like the menu to open when I click on the hamburger, bu ...

javascripthtmlcsstwitter-bootstrap

Innovative Inter-Browser Link with a Distinct Shape

I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows: On the left ...

javascriptjqueryhtmlcssimage