Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content:

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.sidebar {
  background-color: #FFF5BA;
  width: 200px;
}

.main {
  background-color: rgba(248, 248, 248, 1);
  flex-grow: 1;
} 

Here is the corresponding HTML structure:

<div class="container">
    <div class="sidebar">
    <div class="main">
</div> 

The issue arises when additional content is dynamically added to the main section using JavaScript. Once there is enough content to necessitate scrolling, the sidebar fails to expand accordingly as you scroll down.

Although it would be optimal for the sidebar to remain fixed and scroll along with the page, I have come across information suggesting that combining flexbox with position: fixed may not be viable.

If you require complete details, please refer to the following link: https://codepen.io/wulfenn/pen/LYNRNEv (please excuse any untidy code as I am still in the learning phase)

Your assistance is greatly appreciated!

Answer №1

I made changes to the html code by relocating the modal code outside of the container class.

Additionally, I applied the position:sticky property to the sidebar class and set its height to 100vh in order to prevent scrolling when the main content exceeds the 100vh height limit.

To increase the height of the main content, I also inserted a placeholder book-add div.

For full results viewing, switch to fullscreen mode and only the first add button will be functional.

// Object constructor declaration
function Book(title, author, pages, isbn, read, bookURL) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.isbn = isbn;
  this.read = read;
  this.bookURL = bookURL;
}

// Prototype method to toggle status
Book.prototype.toggleStatus = function () {
  if (this.read == 'Read') {
    this.read = 'Not Read';
    return 1;
  } else if (this.read == 'Not Read') {
    this.read = 'Reading';
    return 2;
  } else if (this.read == 'Reading') {
    this.read = 'Read';
    return 3;
  }
}

// Initialize library variables
let myLibrary = [];
const container = document.querySelector('.books-container');

// Displaying and hiding the "Add a Book" form
const popup = document.querySelector('.form-popup');
const addBtn = document.querySelector('.add-btn');
const cancelBtn = document.getElementById('cancel-btn');

addBtn.addEventListener('click', function () {
  popup.style.display = 'block'; // Show
})

cancelBtn.addEventListener('click', function () {
  popup.style.display = 'none'; // Hide
})

/* Rest of the JavaScript code for managing books and book entries goes here... */
@import url("https://fonts.googleapis.com/css?family=Special Elite&display=swap");

/* Custom CSS styling for the layout */
.container {
  /* Add custom CSS styles for the container */
}

.sidebar {
  /* Add custom styling for the sidebar */
}

.main {
  /* More custom styling for the main section */
}

/* Continue with specific CSS rules for different elements and classes */
<div class="container">

  <div class="sidebar">
    <div class="my-library">My Library</div>
    <div class="menu">Home</div>
  </div>

  <div class="main">
    <div class="books-container">
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <!-- Additional book-add divs with add buttons -->
    </div>
  </div>
</div>

<!-- Additional HTML code for the interactive book form -->

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

What might be causing the excessive margins in my Bootstrap grid layout?

I've recently integrated Bootstrap into my Angular project using npm, but I'm facing an issue with excessive margins on the sides. Can anyone provide assistance? Below is the code snippet: <div class="container"> <div class="row"> ...

Tips for Implementing Multi-Level/Nested in Ajax Requests

I am currently developing a user-friendly web application with intuitive multi-level options that loads new content without the need to refresh the entire page. This is how my structure looks: /index.php /schools.html /colleges.html Within schools.html, ...

What happens when browsers encounter unfamiliar at-rules?

CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they f ...

Guide to modifying Button on fetch response in React Native

After receiving a response from the server, I need to adjust the button based on the friends_status field in the following response: { "responseHeader": { "type": "314", "status": "200", "message": "Successfully found the profile" }, "ne ...

Search for documents using jQuery on the page

Here is the layout of a page: HTML <div class="alert alert-dismissable"> <div class="form-group text-center"> <div id="Section"> <div class="row"> <div class="col-md-12"> ...

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

In order to create a simple framework with jQuery style, I have written the following code: (function(window) { window.smp=function smpSelector(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; if (!s ...

Exploring the differences between scoping with let and without any scoping in

Within my code, there is a forEach loop containing a nested for loop. It's interesting that, even though I have a statement word = foo outside of the for loop but still inside the forEach loop, I can actually log the value of word after the entire for ...

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

Limiting the size of image uploads in AWS S3

Currently, I am attempting to go through the steps outlined in this repo, which involves utilizing nextjs and AWS S3 for image uploading. However, one thing that is puzzling me is the limitation of 1MB on image sizes. I'm curious as to why this restri ...

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Here are the TypeScript codes I've written to retrieve product details and delete them. import { Component, OnInit } from '@angular/core'; import {FormGroup,FormBuilder, FormControl, Validators} from "@angular/forms" // other impor ...

Retrieving user email with Vue.js from Firebase

Currently, I am in the process of developing a chat application using Vue.js and Firebase. This project has been quite challenging for me as I am new to both Vue and Firebase. One specific issue I have encountered is trying to retrieve the user's ema ...

Issues with Bootstrap Toggle Button functionality

I encountered a navbar error while working on my Django Project. After adding a few script tags, the navbar started to move down but did not return back to its original position. It worked fine before. By commenting out some script tags, it began to work a ...

Having trouble connecting to the http json service in AngularJS

I recently started learning angularjs and I'm facing an issue with my code. There seems to be a flaw in the code and I'm uncertain about it. From a java perspective, the httpController has a nested function defined inside. Below is the code sn ...

What is the method for setting a default image to be preloaded in filepond?

Currently, I am working on a Laravel view for editing a record which includes an associated image. My goal is to have the image preloaded inside the input file so that when you submit the form, the same image is sent or you can choose to change it. // Con ...

JavaScript encounters an unexpected identifier: Syntax Error

I encountered a syntax error while executing the code below: var userAnswer = prompt("Do you want to race Bieber on stage?") if userAnswer = ("yes") { console.log("You and Bieber start racing. It's neck and neck! You win by a shoelace!") } else { ...

Unable to locate element in Internet Explorer when using frame switching within Selenium

I am currently working on a project in Selenium that is specifically designed to run in Internet Explorer, but I am encountering issues locating the xpath element. Despite this setback, I managed to make progress in the test by using the switch frame func ...

ReactPlayer allows for the simultaneous playback of two files

I am trying to simultaneously play two files in reactjs using ReactPlayer. The first file is a video music clip that includes human voice audio, while the second file is music only without the human voice. My issue is that when I run the code provided, ei ...

Hide modal once form has been successfully submitted

Is it best practice to pass handleClose into ForgotPasswordFormComponent in order to close the modal after form submission, or is there a better way to achieve this? <StyledModal open={openModal} onClose={handleClose} closeAfterTransition slots={{ bac ...