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

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

cssreactjsjsxnext.js

Styling an input button to look like a link in Firefox and Internet Explorer

I'm currently using CSS to give my input button the appearance of a link. Here's how I've styled it: input#linkLike { background: none; border: none; cursor: pointer; margin: 0; padding: 0; text-decoration: none; ...

htmlcssfirefox

Vue.js v-cloak lifecycle method

Currently, I am working on a project where I have styled v-cloak with display: none, and it is decorating the body. As a result, everything remains hidden until the Vue instance is ready. I have created a component that inserts a chart (using highcharts). ...

javascripthighchartsvue.js

Missing 'id' property in ngFor loop for object type

I'm currently learning Angular and I've been following a code tutorial. However, despite matching the instructor's code, it doesn't seem to be working for me. When I try to compile the following code, I receive an error message stating ...

htmlangularngfor

I am having trouble with my append function even though I checked the console log and did not see any errors (beginner's inquiry)

As I practice working with functions and dynamically creating input fields, I have encountered an issue where I am unable to append my input field to the form. Despite using console.log() and not seeing any errors, I can't figure out what mistake I ma ...

javascriptjquery

Sorting through a list of strings by checking for a specific character within each string

After spending years dabbling in VBA, I am now delving into Typescript. I currently have an array of binary strings Each string represents a binary number My goal is to filter the array and extract all strings that contain '1' at position X I ...

javascripttypescript

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

htmlcssinheritancehtml-lists

Check to see if modifying the HTML using jQuery results in any errors

Although it may sound straightforward, let me clarify. I am utilizing ajax calls to update the content of the body and I aim to trigger an alert if the updating process fails on the client side, specifically after receiving a response from ajax in case of ...

javascriptphpjquery

Issue with Typescript and react-create-app integration using Express

I'm relatively new to Typescript and I decided to kickstart a project using create-react-app. However, I encountered an issue while trying to connect my project to a server using express. After creating a folder named src/server/server.ts, React auto ...

javascriptnode.jstypescriptexpress

Retrieve Backbone data immediately following a successful Save operation

Is there a way to trigger a fetch right after saving data? I'm looking to immediately retrieve information after a successful post... Below is the code snippet in question: search: function (search) { searchM = new SearchM(); searchM.sa ...

javascriptajaxbackbone.js

Is there a way to program custom key assignments for my calculator using JavaScript?

As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

javascripthtmlcss

express.static() fails to serve files from public directories when accessed via router paths other than "/"

Express static configuration: app.use(express.static(__dirname + "/public")); Directory Structure: --public --assets --js --[JavaScript scripts] --stylesheets --[CSS files] Defined Routes: const shopRoutes = require('./routes/shopRo ...

javascriptnode.jsexpressejs

Formatting decimals with dots in Angular using the decimal pipe

When using the Angular(4) decimal pipe, I noticed that dots are shown with numbers that have more than 4 digits. However, when the number has exactly 4 digits, the dot is not displayed. For example: <td>USD {{amount| number: '1.2-2'}} < ...

javascriptangulartypescript

.toggle function malfunctioning

Upon page load, I have a script that toggles the County menu. The goal is to hide the county menu if any country other than "United Kingdom" is selected on page load. If the user selects another country after the page has loaded, there is an issue where ...

javascriptjqueryajax

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

A comprehensive guide on associating a JavaScript function with an element attribute

I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...

javascriptjqueryhtmlcss

Simultaneous malfunction of two ajax forms

I have a dilemma with two boxes: one is called "min amount" and the other is called "max amount." Currently, if I input 100 in the max amount box, it will display products that are priced at less than $100. However, when I input an amount like $50 in the m ...

javascriptjqueryajax

"Incorporate Bootstrap drop-down and button together for a stylish group feature

I am looking to format the code below to resemble the layout shown in the image using Bootstrap 3.3. When there isn't enough space to show all elements in a single line, I want them to stack vertically so that each element utilizes the entire width of ...

htmlcsstwitter-bootstrapdrop-down-menubuttongroup

Extracting data from a targeted external source using PHP

Currently, I am attempting to extract data from a certain site using PHP, yet it appears that the specific information I seek is dynamically generated through Javascript or a similar technology. Any advice on how I should proceed would be greatly appreciat ...

javascriptphpweb-scraping

An issue occurred while calling the Selenium web driver: the driver.get() function couldn't access the attribute "href" of the linked_url, resulting in a stale element reference

Currently, I am utilizing Python with Selenium to work on extracting links from Google search results. After successfully accomplishing this task, I am now attempting to navigate through these links one by one using a for loop and the driver.get() method: ...

pythonhtmlselenium-webdriverdom