What are some ways to adjust red and green blocks using CSS?

One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS:

 position:sticky;
 right:0px;
 top:100px;

This keeps the green block fixed in place, but there is an issue when the height is not specified - it behaves as if it has position:sticky; I would like the height of the green block to be customizable, so I set it to 200px; However, this causes problems when there is too much content or in responsive design mode, as the block overflows the green zone.

Is there a better way to keep the red and green blocks fixed in place?

So far, here is what I have been attempting: https://codepen.io/hong-wei/pen/wvgbbye?editors=1100

javascripthtmljquerycssweb

Answer №1

To achieve the desired layout, add align-items: flex-start; to your .container class and remove any height value from the aside.

.wrap{
  background-color: #ccc;
  line-height: 1.5;
}

.header{
  position: fixed;
  width: 100%;
  background-color: #f75454;
  box-shadow:0px 1px 30px #212529;
  z-index: 1;
  
}

.header .list{
  display: flex;
  padding:20px;
  justify-content:space-between;
}

.container{
  display: flex;
  padding:30px;
  padding-top: 100px;
  background-color: #5c5c5c;
  align-items: flex-start;
}

.main{
  flex:2;
  padding:20px;
  height: 1600px;
  margin:0px 20px;
  background-color: #f9cf5a;
}

.aside{
  position:sticky;
  right:0px;
  top:100px;
  padding:20px;
  flex:1;
  width: 100%;
  background-color: #1ba784;
  color:#eef7f2;
}
<div class="wrap">
  <div class="header">
    <ul class="list">
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
  <div class="container">
    <div class="main">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores! Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus, libero iure nam? Accusantium veritatis ad repellat.</p>
    </div>
    <div class="aside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p>
    </div>
  </div>
</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

Exploring the Force-Directed Graph Demo on bl.ocks.org

I don't have much expertise in javascript, jquery, or json. My objective is to create a graph using the force-directed graph example from bl.ock.us. 1) I wrote a python script to generate the necessary json data. 2) I noticed others were us ...

javascriptjqueryjsond3.js

Pause animation when hovering over their current positions

I am working on a project with two separate divs, each containing a circle and a smiley face. The innercircle1 div is currently rotating with a predefined animation. My goal is to create an effect where hovering over the innercircle1 div will pause its rot ...

javascripthtmlcss

Unable to make a POST request to the GitHub v3 API

I'm attempting to generate a public gist using JavaScript without any authentication - all purely client-side. var gist = { "description": "test", "public": true, "files": { "test.txt": { "content": "contents" ...

javascriptjsongithubgist

Leveraging the Google Feed API using jQuery's AJAX functionality

Currently, I am attempting to utilize Google's Feed API in order to load an RSS feed that returns a JSON string. (For more information, please refer to: https://developers.google.com/feed/). Despite this, my approach involves using jQuery's AJ ...

javascriptjqueryajaxgoogle-feed-api

What is the best way to retrieve and save the titles of checked boxes in the Autocomplete using state with hooks?

I've implemented the React Material-UI Autocomplete feature with checkboxes in my project. Here is what I have so far in my code (check out demo.js for details): https://codesandbox.io/s/material-demo-rxbhz?fontsize=14&hidenavigation=1&theme=d ...

javascriptreactjsmaterial-ui

What is the most effective way to utilize an existing table in MySQL with a TypeORM entity?

While working with typeorm to connect to a mysql db, I encountered an issue where my table definition was overwriting an existing table in the database. Is there a way for me to use the entity module to fully inherit from an existing table without causin ...

javascriptmysqlnode.jsexpresstypeorm

Adjust the height of the Iframe to match the content within it

After conducting my research, I have not been able to find a solution. Although I am not an expert in jQuery, it seems that the code is not functioning properly. Within the iframe are links that expand when clicked to display content. However, the height o ...

javascriptjqueryhtmliframeexpand

Creating an Angular service that checks if data is available in local storage before calling an API method can be achieved by implementing a

I am currently working on developing an Angular service that can seamlessly switch between making actual API calls and utilizing local storage within a single method invocation. component.ts this.userService.getAllUsers().subscribe(data => { conso ...

javascriptangulartypescriptrxjs

Unexpected reduce output displayed by Vuex

In my Vuex store, I have two getters that calculate the itemCount and totalPrice like this: getters: { itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0), totalPrice: state => state.lines.reduce((total,line) = ...

javascriptvue.jsvuex

Top solution for live chat between server and client using jQuery, Java, and PHP on a localhost setup

Seeking recommendations for the best chat solution to facilitate communication between client PCs and a server in my private network. Specifically interested in an Ajax/Java solution similar to the chat support feature found in GMail. ...

javascriptjqueryajaxjquery-pluginslivechat

Retrieve data from an Observable containing JSON objects

I am currently working with a Http request that returns Json data, which I then store in an observable. { "proyecto":{ "nombre": "Mercado de Ideas", "tecnologias": [ { "nombre": ".NET", "icono": "http://getsetwebsit ...

htmlangularjsjsonionic2observable

Error in Javascript chrome when trying to determine the length of an array

I am facing an unusual issue with the JavaScript console in Chrome. When I type the following code into the console: var numbers = new Array(["/php/.svn/tmp", "/php/.svn/props"]); it returns "undefined." This leads me to believe that 'numbers' ...

javascriptgoogle-chrome

IE throws an exception when attempting to use Canvas as it is not supported

One of my challenges involves working with a Canvas Element: <canvas id="canvas" width="300" height="300"> Sorry, your browser does not support the Canvas element </canvas> In my JavaScript file, I have the following code: var ct= docum ...

javascripthtmlinternet-explorerhtml5-canvas

What is the best way to grab just the whole number from a string in JavaScript?

I'm facing an issue with a specific string format: const value = "value is 10"; My goal is to retrieve the integer 10 from this string and store it in a separate variable. How can I achieve this efficiently? ...

javascript

Receive an error stating "Filename is not defined" when attempting to upload an image in React

Postman functioning properly with my backend code. I utilized form-data and added a random file. The file uploaded successfully to the image folder, but a problem arises when it comes to React. It fails to upload and displays an error on the backend stati ...

javascriptnode.jsreactjsexpressmulter

What is the best way to increase the value of a variable using jQuery?

As I work on adding dates to a slider, I find myself needing to increment the values with each click. Initially, I start with the year - 2. $('#adddates').click(function() { var year = 2; $("#slider").dateRangeSlider({ bounds: { ...

javascriptjquery

React Material-ui Dropdown Component

Once I completed my application, I decided to enhance its appearance using Material UI. During the transition from HTML to Material UI, a warning started appearing when selecting an item: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDO ...

javascriptreactjsmaterial-ui

What is the best way to simulate a constructor-created class instance in jest?

Suppose there is a class called Person which creates an instance of another class named Logger. How can we ensure that the method of Logger is being called when an instance of Person is created, as shown in the example below? // Logger.ts export default cl ...

javascripttypescriptclassjestjsmocking

Contrast between using " and '

Similar Inquiry: When to Utilize Double or Single Quotes in JavaScript Comparison of single quotes and double quotes in JS As I delve into creating a Node.js Express web application, I've noticed that the tutorial consistently uses ' ins ...

javascriptnode.jsexpress

Building an interactive array with checkboxes and mapping in React JS: A step-by-step guide

I am currently working on mapping a list of formations and would like to implement a dynamic array that updates when a checkbox is selected in the onChange event. The goal is to keep my organization updated with the formations they are able to dispense. ...

javascriptarraysreactjscheckboxmaterial-ui