On smaller device screens, the full-height sidebar and content area experience some disruption

How can I resolve the height issue with sidebar and content area on smaller devices, maintaining 100% height for both? I'm having trouble fixing it with the current code.

I am aiming to create a fixed-width sidebar that expands to full width on smaller devices. The sidebar should stick while scrolling through the content.

I am using Bootstrap 4 for this project.

Thank you

The provided code snippet:

<!doctype html>
...
...
...
</html>

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

Using @MinIsNghia's code, I encountered two issues that I need help resolving: https://i.sstatic.net/etXtE.png

htmlcsssidebar

Answer №1

For proper layout, I included overflow: auto; in the .sidebar and .main CSS classes.

Answer №2

Avoid excessive use of the class h-100. Only use it when necessary. Also, remember to include clear:both when using float: left or float:right

=====Updated =====

Set box-sizing to prevent changes in height and width:

*{
  box-sizing: border-box;
 }

Set a minimum height for sidebar and main:

.main, .sidebar{
   min-height: 100vh;
}

Lastly, use jquery:

$(document).ready(function () {
    var sidebarH = $(".sidebar").outerHeight();
    var mainH = $(".main").outerHeight();
    if (sidebarH > mainH) {
        $(".main").css("height", sidebarH);
    }else{
        $(".sidebar").css("height", mainH);
    }
 })



$(document).ready(function () {
  var sidebarH = $(".sidebar").outerHeight();
  var mainH = $(".main").outerHeight();
  if (sidebarH > mainH) {
     $(".main").css("height", sidebarH);
  }else{
     $(".sidebar").css("height", mainH);
  }
})
<!doctype html>
<html lang="en" class="h-100">

... (the remaining HTML code follows) ... 

</html>

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

Problem with CSS: In Chrome, text fields have 3px additional margin-right

https://i.sstatic.net/I8mzi.jpg I am facing an issue with the margins of my text fields. Even though I have set a margin-right of 5px for each field, Google Chrome seems to be adding an additional 3-4px automatically. This problem is evident when I dynami ...

javascriptjqueryhtmlcssgoogle-chrome

Nested pages are causing jQuery plugins to malfunction

I am currently working on a website, but I am facing some issues with the product listing pages and the tips and tricks page. It appears that there is an issue with jMenu and jFlipBook plugins not functioning properly. Since I didn't develop the origi ...

javascriptjqueryhtmlcss

Mastering the CSS Art of Working with Sprite Images and Their Positioning

I am currently working on an educational project as a front-end developer, where I aim to clone the Google homepage. To achieve this, I am utilizing Google's own sprite and here is the image of the sprite that I am using. https://i.stack.imgur.com/YT ...

htmlcsssasssprite

What is the best way to access the tooltip text in Reddit?

Currently, I am in the process of developing a Selenium web scraping tool specifically for Reddit. However, I am encountering some challenges in extracting the timestamp displayed in the image. from selenium import webdriver from webdriver_manager.chrome i ...

pythonhtmlseleniumwebweb-scraping

buttons are arranged horizontally, stacked neatly on top of one another

I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...

htmlcssbuttoncheckbox

Labels can sometimes cause text input fields to become unresponsive

I've encountered a bug while working on my website with the materializecss framework. Sometimes, inputs are not responding correctly. This issue seems to occur when clicking on the first input and accidentally targeting the higher part of the second ...

javascripthtmlmaterialize

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

jquerycssdisplay

Issues with the Content Editable Functionality

While working on my website, I encountered a strange issue. For some reason, I can't seem to get the contenteditable="true" attribute to work on the heading with the ID "hl". It would be awesome if someone could help me figure out how to mak ...

javascripthtmlcss

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

javascriptjqueryhtmlcss

Issue with variable creation within ng-repeat

After reading a question on StackOverflow about determining the number of filtered out elements, I wrote the following code in Angular: <input type="text" ng-model="query" placeholder="Enter query..."> <div ng-if="filteredData.length!=data.length ...

javascripthtmlangularjsangularjs-ng-repeat

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

HTML CODE <div id="scrollidout" style="overflow: auto; overflow-y: hidden; "> <div id="scrollidin" style="padding-top: 1px; height: 20px; width: 1000px">&nbsp;</div> </div> <div class="resultcontent" style="overflow ...

javascriptjqueryhtmlcssajax

Unusual occurrence involving label span and the use of italic font styling

Currently following a Xamarin tutorial on creating a label view. You can check out the tutorial here. Encountered an issue where applying an italic font attribute to text within a span tag does not retain the text size set in the label tag. <StackLayo ...

htmlxamarinlabelitalic

"Revolutionary tool for creating dynamic charts: moving from ASP.NET to HTML

Hello, I am currently developing a project in an ASP.NET environment and am in need of a framework that can generate interactive charts on the server side. It would be ideal if the framework is open source, and produces charts in HTML5 as I also plan to pu ...

asp.nethtmlchartsserver-side

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

javascripthtml

What causes the values to constantly change whenever I insert an element into the array?

When I add an element, it automatically replaces all the others. This issue only occurs when I insert the entire object; if I insert a typical element such as an integer or a string, it works without any problems. <body> <div id="app&quo ...

htmlvue.js

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

javascriptjqueryhtmlcss

Tips for maintaining an organized layout of buttons on a compact screen

When the following HTML code is executed on a small screen, one or more buttons will naturally shift to the "lower line" in order to adjust to the screen size. While this may seem like a good thing initially, unfortunately, any button that moves down a row ...

html

What is the best way to extract pricing information from Udemy?

Important: I haven't been able to find a relevant solution in similar questions. How can I extract prices from Udemy using web scraping? Scraping Data From Udemy's AngularJs Site Using PHP How do I obtain promotional prices using the Udemy API ...

pythonhtmlseleniumweb-scraping

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

htmlcsscss-floattext-decorations

Navigating within a nested view using Angular's UI-Router

I've encountered a puzzling issue that I've been grappling with for the past three days. It seems like a straightforward problem, but for some reason, it's causing me a lot of trouble. The main parent view in my code contains two child view ...

angularjshtmlionic-framework