Resizable vertical sidebar that is permanently fixed in place

I am currently working on a bootstrap website where I have set up two main divs in the body - the sidebar and content. The content div on the right adjusts its height based on the amount of content within it, while the sidebar div on the left should remain fixed at a height equal to 100% of the screen size. This ensures that when scrolling through the content, the sidebar remains in place.

My current challenge is figuring out how to add a splitter between the two divs that allows for horizontal resizing by dragging. When I attempt to assign position: fixed to the sidebar div, I encounter an issue.

<body>
    <div class="sidebar"></div>
    <div class="splitter"></div>
    <div class="content"></div>
</body>
htmlcssbootstrap-4

Answer №1

I believe what you're searching for is something similar to the following:

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.left {
  position: fixed;
  height: 100%;
  width: 250px;
  
  /* for testing*/
  background-color: green;
  color: white;
  padding: 10px;
}

.right {
  position: absolute;
  left: 250px;
  width: 100%;
  
  /* for testing*/
  background-color: blue;
  color: white;
  padding: 10px;
}
<div class="left">test</div>

<div class="right">
  START!<br /> Hello World! ...

Regarding the section about needing a split handler between the divs to resize their widths while dragging horizontally, are you looking to drag them separately or just aiming for responsiveness?

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

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Strategies for retaining a list of chosen localStorage values in Angular6 even after a page refresh

When I choose an option from a list of localStorage data and then refresh the page, the selected data disappears. selectedColumns: any[] = []; this.listData = [ { field: "id", header: "Id", type: "number", value: "id", width: "100px" }, { field: "desc ...

htmlangulartypescriptangular-materialangular6

Is it possible for a CSS block to incorporate another block within it?

Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...

htmlcss

How can you utilize CSS to automatically generate section numbers, specifically for multiple sections?

Is it possible to automatically generate section numbering in CSS only when there are multiple sections present? I discovered that using CSS, one can create automatic numbering for sections. body { counter-reset: section } h2 { counter-reset: sub-section ...

htmlcssautomatic-properties

Obtaining a fingerprint image from a scanner and incorporating it into a user registration form

I am currently developing a project using PHP. I am interested in integrating a fingerprint scanner to capture images for user registration forms and then saving them to a database. Is this feasible? If so, I would appreciate any guidance on how to imple ...

phphtmlcss

Combine the points of individual letters in Scrabble using jQuery

Hello, I'm currently working on creating a Scrabble game. My goal is to assign a value to each letter and then calculate the sum of these values when the input box changes. After some research, I was able to find information on how to add numbers on ...

jqueryhtml

Challenges with implementing @Html.EditorForModel

Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...

cssasp.netrazorhtml-helperasp.net-mvc-5

Strategies for creating a grid-inspired layout: tips and tricks

Recently, I've been tasked with creating a catalogue section for our e-commerce site. My designer came up with this layout which I find really appealing, but I'm having trouble figuring out how to implement it. I attempted using tables, but it di ...

htmlcssflexboxtailwind-css

Is there a way I can decrease the width of the input field on the left side?

body { background: white; font-family: 'Ubuntu', sans-serif; } .cas { display: inline-block; border: 2px solid #0C8346; background: #0C8346; font-weight: 300; font-size: 20px; padding: 5px; width: 200px; text-align: center; ...

htmlcssbootstrap-4

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

Obtain the YouTube video identifier from a YouTube embedded link

Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...

javascriptjqueryhtmlregex

Setting the css height to 100% won't be effective if the elements are floated either to the right or left

I'm currently working on a web project and I need to create an HTML page. I'd like to adjust the height of an element to a percentage to ensure it fits the page well. However, when I try to use the float property in CSS and set it as follows: bo ...

htmlcssheight

Inconsistency in field generation in WordPress Contact Form 7 causing issues

After utilizing the WordPress plugin Contact Form 7 to put together a straightforward questionnaire, I discovered that two fields, Your Birthday and Your Email, were mistakenly generated on top of one another in the final output. You can take a look at th ...

htmlcsswordpressforms

Breaking the link from the image it is connected to using [middleman] css and html

My question is about an icon with a link attached to it. <%= link_to image_tag("infobutton_circle_blue.png") ,"http://redbullrecords.com/artist/awolnation/", :id => "about" %> After applying styles, the link may not work properly: <a id="abo ...

csshtmlsassmiddleman

Issues with cross-browser compatibility are arising in my jQuery code

Here is the code snippet I'm working with: function toggleLoader( display ){ if( display === 'show' ){ $('.overlay, .loader').css({ 'z-index' : '1000', 'display& ...

javascriptjquerycsscross-browser

Ways to expand flexbox to occupy the entire container

I have a scenario where I want two flexboxes in a container to fill the entire height of the container. The left flexbox should display an image that fills its entire space, while the right flexbox contains other content. However, I'm facing difficult ...

htmlcsstwitter-bootstrapbootstrap-4

Syntax error when inserting PHP code snippet into HTML

Seeking some assistance with a PHP/HTML page I'm working on. The code is throwing a syntax error when it reaches the final tag, and I can't figure out what is causing it. Any help would be greatly appreciated! Here is the snippet of my code: < ...

phphtml

Getting the badge value of a button in Angular JS is a simple process that involves accessing

How can I retrieve the badge value of a Button? This badge represents data-text-as-pseudo-element and I am new to Angular. Can someone guide me on how to achieve this? <style type="text/css">[data-text-as-pseudo-element]::before { content: ...

htmlcssangularjs

The picture tag in HTML5 is failing to be responsive when used with Bootstrap

I'm experimenting with the html5 <picture> tag to set different images. I placed the 2 pictures within a bootstrap grid, allowing them to be responsive until the breakpoint 768px, where the image changes. However, when I decrease the browser si ...

htmlcsstwitter-bootstrap

Display line numbers in HTML/CSS cellsorIncor

Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...

htmlcssreactjs