Setting the percentage height of parent and child divs in a precise manner

Trying to work through this without causing chaos. I have a container div containing three floated left child divs, with the container div set to 100% height like so:

.Container {
height: 100%;
min-width: 600px;
overflow-y: hidden;
}

One of the child divs inside the container (sidebar1) has the following CSS:

 border: 1px solid #E0E0DF;
bottom: 10px;
box-shadow: 2px 2px 4px #888888;
float: left;
height: 100%;
overflow-y: scroll;
width: 18%;
}

I'm dynamically adding list elements to sidebar1 using jQuery. The issue I'm facing is that the scrollbar doesn't appear until several items are added beyond view, and even when it does show up, I can't scroll all the way down to see them. It seems to be related to both parent and child divs having 100% height. How can I achieve a full-screen container div without scroll bars, while also allowing my floated child divs to maintain visibility and fully display their scroll bars?

Any advice or solution would be greatly appreciated.

javascriptjquerycsshtml

Answer №1

The issue lies in the fact that your container is not properly containing its floated children. To fix this, implement a clearfix solution on your container to properly manage the floats and enable the scrollbar.

Keep in mind that you may encounter issues with the scrollbar appearing from the first item due to the container's height being affected by borders. You can address this by setting the box-sizing property on the floated elements to border-box.

Main concept of clearfix: 

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Check out this link for more information:

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

Iterating through an array of objects and performing reduction based on various key-value pairs

I am faced with a challenge of consolidating a large array of objects into one single array that has a specific structure. Each item, such as a banana, needs to be present in two separate objects for buy orders and sell orders, each with their own distinct ...

javascript

"Error encountered when attempting to read a file from a dialog box using Electron due to

I am currently working on an electron program that requires reading a file in order to apply another program onto it. At this stage, my main goal is to successfully read and log the content of the file. Below is the code snippet I have implemented in a sc ...

javascriptnode.jselectron

Retrieving Files from POST Request Body Using Node.js and Angular

Currently, I am developing a MEAN Stack application and facing an issue while handling a form that should allow users to upload a file upon submission. The process seems to work seamlessly on the client side; however, when I inspect the request body after ...

javascriptnode.jsangular

How to implement a self-invoking function in React JS like you would in regular JavaScript?

Is it possible to invoke the function good without triggering it from an event? I want it to run as soon as the page loads, similar to a self-invoking JavaScript function. Check out this example import React from 'react'; class App extends Reac ...

javascriptreactjsjsx

Passing data from the controller to the $resource object in Angular with the MEAN stack

After several attempts to troubleshoot my issue with passing parameters to the Express server, it turns out the problem lies on the Angular side. When I manually inserted the id in the flConstruct.js function, the query worked correctly. It appears that ...

javascriptangularjsgetmean-stackangular-resource

choosing a particular child that I am currently hovering over

I'm attempting to change the properties of the element I am hovering over inside a table. I have tried using the children method, as shown in the code snippet below: <table class="tablemain" position="absolute"> <tr height="100%"> <td ...

jquery

What's causing these flex items to not wrap around properly?

I'm facing an issue with a flex item that also acts as a flex container, .sub-con. The problem is that the flex item within .sub-con is not wrapping even after applying flex-flow: row wrap. Is there anyone who can help me resolve this problem or iden ...

htmlcssflexboxword-wrap

Issues presenting themselves with Material UI Icons

I need some help with a problem I'm having. I'm trying to integrate my React app into an Angular app, and everything is working fine except for the material-ui/icons. They appear, but they are not displaying correctly! I have made sure to use th ...

javascriptreactjsiconsmaterial-ui

When a user taps on a link or anchor within a specific webpage on an iPhone, the font size will automatically increase

The issue is specific to iPhones. I have tested it on an iPhone 5 (landscape mode) and an iPhone 4s (landscape mode). For a visual demonstration, you can view the video here. I attempted to fix the problem by specifying the font size, but unfortunately, ...

htmlcssiphonemobile-safari

Having trouble setting default value using formControl in a component shared across multiple forms

Currently, I am facing an issue with setting a default value in a custom dropdown by using formControlName. In order to attach formControls to a shared component, I am utilizing ControlValueAccessors in the shared component. This allows me to update the fo ...

javascriptangulartypescriptangular-reactive-formsangular4-forms

Triggering the retrieval of complete HTML content by clicking a button in order to load extra elements using Selenium

My goal is to scrape a webpage and gather all the links present on it. The page displays 30 entries and to access the complete list, one must click on a "load all" button. Below is the Python code snippet I'm currently using for this task: from sele ...

csspython-3.xseleniumweb-scrapingbeautifulsoup

I'm having some trouble with scrapy - whenever I try to extract data from a page, I can only seem to get the first record. How can I

I am currently exploring Scrappy for web scraping and trying to implement a similar example from (link ) to crawl Craigslist. However, when I execute my code, I am only able to fetch the first entry on each page. The sample output from the code snippet pr ...

javascriptpythonhtmlscrapy

Unable to retrieve information from the firestore database

When trying to fetch documents from the firestore, I encountered an issue where it returns an empty array. However, when I run console.log(docs); outside of the declared function, it actually shows the array data. This problem arises because my useEffect f ...

javascriptreactjsfirebasegoogle-cloud-firestore

Is it possible to center my tab on the page and add captions as well?

Struggling to align a tab with 3 image buttons in the middle, I resorted to using manual margin adjustments. I also added captions separately from the buttons for aesthetic purposes, but know this is not the correct way. Is there a way to attach the captio ...

htmlcssalignmentbootstrap-4

Implementing a node.js application deployment with pm2 to ensure zero downtime

While there are countless tutorials on developing chat applications using socket.io and node.js, the event-driven advantage of Node is undeniable for building chat apps. However, a recent thought crossed my mind - how can I ensure the sustainability of my ...

javascriptnode.jsexpresssocket.iopm2

Use javascript to modify a specific section of a link

I have a set of datatable rows with links that contain data, and I need to modify part of the link text. For instance, if the link is 200.0.0.10, I want to change it to 160.11.10.12. Despite attempting the following code, the link does not change: var ...

javascriptphpjqueryajax

Proper Structure for Node System (BASIC)

Overview Recently, I entered the world of Node.js and built some basic back end functionality. However, I realized that everything was clustered in one file (index.js) which led me to explore tutorials on using express router middleware and adapting a mod ...

javascriptnode.jsexpressmodel-view-controllermodule

Ways to retrieve the state from the Redux store

While working on setting up the Redux store in my app.js file, I found myself populating it with data from the database. However, now I am faced with the task of obtaining the state of the store in a plain JavaScript file, not a React class. If I was work ...

javascriptreactjsreduxreact-reduxstates

What is the method for retrieving all elements, regardless of duplicative data?

I need assistance with a project in which I am attempting to extract brand names and prices from a website. Below is the code I am currently using: List<WebElement> list_of_products = driver.findElements(By.xpath(loc.getProperty("brandName" ...

javascriptjavaseleniumhashmapmapping

The TD border is slicing through the div and is placed on the table in IE standards, causing it

Below is the HTML code where the div is being cut by the table border when the page is in standards mode. Interestingly, if I remove the <!DOCTYPE html>, then it works fine as expected. The issue of the outside div not behaving properly on the table ...

htmlcss