Trouble with CSS full height implementation within a scrolling container

I have been grappling with this straightforward issue for quite some time now. It seems to be a unique problem as I couldn't uncover a similar one online.

My goal is to set the height of the green bar to 100% (to match the height of the red parent element).

If it helps, here is a link to the codepen: https://codepen.io/tartie2/pen/NWYZpgj

Below is the relevant code snippet:

div {
  background-color:red;
  height:200px;
  width:300px;
  position: relative;
  overflow: auto;
}

div::after{
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width:10px;
  background-color: green;
}
<div>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
</div>

Answer №1

The height of the parent container is set to 200px. The ::after pseudo-element is attempting to fill this specified height. When you eliminate the height property from the parent, the pseudo element will then occupy the entire height of the parent.

div {
  background-color: red;
  width: 300px;
  position: relative;
  overflow: auto;
}

div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 10px;
  background-color: green;
}
<div>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
</div>

Answer №2

Here is a suggestion for you:

.wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
}

.green-bar,
.content {
  height: 100%;
}

.green-bar {
  width: 10px;
  background-color: green;
}

.content {
  padding-left: 10px;
  background-color: red;
  width: 100%;
  position: relative;
  overflow: auto;
}
<div class="wrapper">
    <div class="green-bar"></div>
    <div class="content">
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
    </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

Having trouble seeing the output on the webpage after entering the information

I can't seem to figure out why the result is not displaying on the HTML page, so for now I have it set up as an alert. <h1>Factorial Problem</h1> <form name="frm1"> Enter any number :<input type="text" name="fact1"& ...

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

The Node.js server is outputting an HTTP status code of 404

I have recently set up a small server. Interestingly, when I attempt to perform a GET request to my server through a browser, I can see the correct data. However, when I try to make a POST request to my server using code, I receive an HTTP status 404 error ...

Exploring the functionalities of Express and Socket.io

I am new to creating a Node.js app using express V 3.4.8 and socket.io V 0.9.16 to display a map with markers showing where users are connecting to the site. I am doing this to learn more about node.js and how to incorporate maps into my projects. However, ...

Showing a variety of pictures within a specified time frame

In my CSS, I have defined classes that allow me to display different background images on a page at set intervals: .image-fader { width: 300px; height: 300px; } .image-fader img { position: absolute; top: 0px; left: 0px; animation-name: imagefade; ...

Invoking a function in JavaScript from within the same file

Currently in the process of developing a React application. One of the files I am working with is user.utils.js, where I have stored some utility functions that are utilized within my reducer. export const addUser = (state) => {} export const resetUse ...

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

Troubleshooting Node.js and Express: Adding to array leads to displaying "[object Object]"

As a newcomer to web development and currently enrolled in a course for it, I am in the process of creating a test web server before diving into my main project. In this test scenario, my goal is to extract the value from a text block and add it to a respo ...

Executing a child component function once the parent component data is loaded in Angular 5

In my project, I have a parent component called program-page.component where I am invoking a function to fetch some data. ngOnInit() { this.getProgress(); } getFirstProgramItem() { this._contentfulService.getProgramItem(4, 1) .then((programItem) = ...

I am able to access the JSON file from the URL without any issues, but for some reason, I am unable to fetch it using $

(function(){ $(document).ready(function(){ $.getJSON('http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=AAPL&callback=?', function(){console.log("function was run");}); }); }()) I recently delved into working with APIs. Ho ...

Can anyone help me figure out the best way to test for observable errors in Angular2?

I'm currently working on creating unit test cases for my Angular2 components. Up until now, the test cases have been running smoothly. However, I've run into some issues with my asynchronous calls. For example, I have a method for creating a n ...

Error message: Requesting server-side file requires JavaScript to be enabled

This issue has been quite a challenge for me, as it appears to be straightforward but has turned into a complex problem. I have a vue application that utilizes canvas to draw images. I want an API to determine the 'type' of image to display (fil ...

The process of executing a PHP file from JavaScript using XMLHttpRequest is experiencing issues on a XAMPP local server

I'm attempting to execute a PHP file using JavaScript. I have my XAMPP server set up and all files saved in the htdocs folder. The PHP file is also stored in the htdocs folder and works correctly when accessed via http://localhost/php_test.php in Chro ...

Issues with CSS rendering have been encountered on the Facebook page

I'm experiencing an issue with the rollover CSS on Facebook's rendering engine. I'm not sure if I made a mistake in my code or if there are limitations with certain CSS properties on custom Facebook pages. Here is the code I am using: <l ...

Verify if the React component is empty

Within my react component, there's a class or component that contains a specific variable. Below is the relevant code snippet: import React from 'react'; export class Header extends React.Component { constructor() { super(); thi ...

Conflict between iOS 7+ swipe back gesture and stateChange animations

When transitioning between states in an AngularJS application, I utilize CSS animations to add visual appeal to the view change. This may involve applying fades or transforms using classes like .ng-enter and .ng-leave. In iOS 7+, users can swipe their fin ...

Sharing application state between different routes in React Router v4 can be achieved by using methods such

I'm seeking solutions to address the following challenge: Without utilizing any state management library, I solely rely on React. The primary application state is contained within the <MyFoodApp/> component, which includes an array of restaura ...

What's the reason behind express-rate-limit not performing as anticipated?

There seems to be an issue with the enforcement of the rate limit I specify in my code. Instead of lasting for 35 minutes as intended, it only lasts for about 20 seconds. Additionally, continuously making requests seems to reset the time limit, which is un ...

Preventing click events with pointer-events property in CSS while still allowing scrolling

Is there a way to use pointer-events: none to disable click events on a specific container while still allowing scroll functionality and an overlay? You can view my fiddle here: https://jsfiddle.net/1eu6d3sq/1/ Currently, when I apply pointer-events: non ...

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...