Increase the parent height by 100% when the child element expands

I am attempting to create a full-screen website with 100% height and no scrollbar. I have a div that takes up 90% of the page height and I want to dynamically add elements inside it. However, when there are too many elements inside this div, they expand the parent's height. This poses a problem because the "overscroll:hidden" property on the body causes the bottom half of the page to be out of view. I have created an example to demonstrate this issue:

View the fiddle

If you remove the class="textBox" elements, you can see how it should look. I have tried adding the overflow:scroll property to the parent div, but it does not solve the problem, nor does max-height:100%.

HTML

<div id="wrapper">
<div id="left">
    <div id="something">valami</div>
</div>
<div id="right">
    <div id="parent">
        <ul id="container">
            <li>
               <ul class="group">
                    <li class="textBox">
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                    </li>
                    <li class="textBox">
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                    </li>
                    <li class="textBox">
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                    </li> 
               </ul> 
            </li>
        </ul>
        <div id="bottomContainer">

        </div>
    </div>
</div>

CSS

body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
#wrapper {
    height: 100%;
    width: 100%;
    display: table;
}
#left, #right {
    display: table-cell;
    width: 50%;
    height: 100%;
    background-color: green;
}
#left {
    background-color: red;
}
#parent {
    padding: 50px 0 150px;
    height: 100%;
}
#container {
    border: 1px dashed black;
    height: 100%;
    max-height: 90%;
    overflow: scroll;
}
#container li {
     max-height: inherit;
}
#bottomContainer {
    height: 50px;
    border: 1px dashed black;
}
.group {
    padding: 10px;
}
.textBox {
    border: 1px dashed black;
    margin: 10px 0;
}
ul {
    list-style: none;
    padding: 0;
}
htmlcss

Answer №1

check out the updated fiddle here

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
::-webkit-scrollbar { 
    display: none; 
}
#wrapper {
    height: 100%;
    width: 100%;
    display: table;
    position: relative;
    overflow: auto;
}
#left, #right {
    display: table-cell;
    width: 50%;
    background-color: green;
}
#left {
    background-color: red;
    position:absolute;
    top:0;
    left:0;
}
#right {    
    position:absolute;
    top:0;
    right:0;
}
#parent {
    padding: 50px 0 150px;
    height: 100%;
}
#container {
    border: 1px dashed black;
    height: 100%;
    max-height: 90%;
}
#container li {
     max-height: inherit;
}
#bottomContainer {
    height: 50px;
    border: 1px dashed black;
}
.group {
    padding: 10px;
}
.textBox {
    border: 1px dashed black;
    margin: 10px 0;
}
ul {
    list-style: none;
    padding: 0;
}

Answer №2

It's not entirely certain if this is the exact solution you were seeking, but relocating the overflow: auto attribute to #parent appears to resolve the issue:

http://jsfiddle.net/YqP9g/2/

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
#wrapper {
    height: 100%;
    width: 100%;
    display: table;
}
#left, #right {
    display: table-cell;
    width: 50%;
    height: 100%;
    background-color: green;
}
#left {
    background-color: red;
}
#parent {
    padding: 50px 0 150px;
     height: 100%;
    overflow: auto;
}
#container {
    border: 1px dashed black;
}
#bottomContainer {
    height: 50px;
    border: 1px dashed black;
}
.group {
    padding: 10px;
}
.textBox {
    border: 1px dashed black;
    margin: 10px 0;
}
ul {
    list-style: none;
    padding: 0;
}

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

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

As a relatively new user to Laravel with previous experience using older versions of Foundation, I am currently in the process of setting up a new Laravel project. My goal is to integrate the Foundation framework into my project, but I find myself a bit co ...

javascriptphphtmlcsslaravel

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

javascriptphphtml

Guide on aligning text beneath and to the side of an image, and positioning them in the same row using CSS Bootstrap 4

I am looking to organize two different texts alongside and under an image within a single article. I also want these two articles to be displayed in the same row when the window size is col-md or larger. https://i.sstatic.net/ZjigH.jpg The second article ...

cssbootstrap-4

Decode JSON data retrieved from a remote URL address

I am in need of assistance decoding this JSON code from a URL page. The JSON code on the URL is in the following format: {"current":{"artists_id":"55","albums_id":null,"albums_tracks_id":null},"html_current":"<li><p>Pr\u00e1v\u011b h ...

phphtmljsonurldecode

Steps for Deactivating Past Dates on JQuery Datepicker1. Open your

I've been working on a custom JQuery Calendar for selecting appointments, with the requirement to disable dates prior to the current date and highlight available dates in an orange color (#f48024). Unfortunately, my attempt using minDate hasn't b ...

javascripthtmljquerydatepickercalendar

Featuring a visual arrangement of categorized images with AngularJS for an interactive display

As I work on developing a web application with Angular, my goal is to create a grid layout that organizes items by category. Each row will represent a different category. Below is an example of the code structure I have in place: <ion-item ng-repeat="i ...

javascripthtmlangularjs

Show the user's username on their profile page by retrieving the name from the database

Upon successful login/signup with various services, I want to display the username on the profile page. However, my database stores user data in different fields depending on the service used - user.twitter.name for Twitter logins, user.google.name for Goo ...

javascriptnode.jshtmlexpress

show certain DIVs based on the URL

Is it possible to dynamically display different sections based on the URL? My event website has 3 subevents, and I'd like to show the date of each event in the navigation bar for their respective URLs. <div id="us" class="us-web-date">&nbs ...

javascriptphpcss

Utilizing em units within CSS media queries is producing erratic outcomes on various browsers

My CSS media queries are set up in a progressive manner like the following: * { font-size: 14pt; } @media screen and (min-width:85em) { : : } @media screen and (min-width:110em) { : : } When I have two browsers open on the same screen, with identical siz ...

cssmedia-queriesfont-size

Using JavaScript to automate keystrokes programmatically

Is there a way to programmatically close a webpage using the keyboard shortcut control + W? I'm wondering if I can write code that will mimic this specific shortcut (control+W). ...

javascriptphphtml

What is the best way to interpret HTML special characters (such as those with accents) in a Facebook share post?

<meta property="og:title" content="<?php echo $title; /> where $title is retrieved from a database. The title should display as blácv with the character a accented, but when sharing the post on Facebook, it appears as bl&aacutecv. T ...

phphtmlfacebookmeta-tagshtml-entities

I am unable to load any HTML files in my VueJS iframe, except for the index.html located in the public

Within the template of my vue component, I am utilizing the following code: <iframe width="1000vw" height="600vh" src="../../public/myHtmlFile.html"></iframe> Unfortunately, the file specified in the src attribut ...

javascripthtmlvue.jsiframe

What is the process for importing a local widget file in Angular?

I have a unique widget named employee-widget stored in the Angular application folder as employee-widget.js. Despite following the calling method below, the widget fails to load. Method 1: <div> <h4>Attempting to load the employee widget& ...

htmlangularwidget

What could be the reason for the image not displaying properly in a React application?

Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here? <div className="container-fluid"> <div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent"> ...

htmlcssreactjstwitter-bootstrap

Mastering the Zurb Foundation equalized grid: aligning content at the bottom of a div within a grid cell

One common challenge is how to position content at the bottom of a div, but with Flexbox, it's becoming easier nowadays. In my case, I'm using the Zurb Foundation grid with equalisation. This equalisation is crucial because my cells have an imag ...

csszurb-foundation

Image cannot be inserted into the div container

I've created a wrapper div with a text div and an image div floating to the right. It should have been a simple task, but for some reason I can't seem to get it to work tonight. I'm completely stuck. Take a look at how it appears currently: ...

csshtml

Tips for customizing the appearance of a specific mat-button component in an Angular project

In my Angular application, I have set up a scenario where users are presented with multiple choices through buttons. When a user clicks on a button, a specific component is displayed based on their choice. I am currently working on enhancing the styling of ...

htmlcssangularangular-materialangular-material2

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

htmlcss

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

jquerycssajaxcallbackpositioning

Is it possible for Penthouse to retrieve critical CSS while using javascript?

I am currently utilizing the laravel-mix-criticalcss npm package to extract the critical CSS of my website. This package leverages Penthouse under the hood, and you can configure Penthouse settings in your webpack.mix.js within the critical options. The ...

javascriptcssnpmlaravel-mixcritical-css