Dysfunctional Height and Scroll Styling with Javascript

[iwato]

REQUEST:  Please compare the results in the middle panel of the following two actions:

ACTION ONE:  

1. Click on the phrase Weekly Podcasts under the heading Products in the navigation bar of the Grammar Captive mainpage.
2. Scroll to the bottom of the page and view how the middle panel exceeds the height of the navigation bar and side panel.

ACTION TWO:

1. While on the same page with the same panel open click on the phrase Click and Listen.  This will bring you to a different document in the same window.
2. Notice that the middle panel does not exceed the height of the navigation bar and side panel.  Also, note that the panel's scroll functionality is well in place.

Now return to the Grammar Captive mainpage and perform the following:

1. Find the phrase Q&A under the heading Search Grammar Captive in the navigation bar and click on it.
2. Notice the absence of a border around the middle panel.
3. Enter the word Frage in the search box and click on the Search button. (Do not hit the ENTER/RETURN key, else you will be blown away)
4. Notice that middle content is now enclosed in a border and that the height of the content is nearly that of the navigation bar and side panel. (I acknowledge that there are some problems with the CSS, and I believe that I know how to fix them.)
5. Click on the phrase The Answer ... wherever you would like and notice that the content of the middle panel fill below either of the two side panels.
6. Click on the phrase Click and Read below the answer on watch the role of digital toilet paper unravel.  It is this phenomenon that I am seeking to prevent with the introduction of scroll functionality.

The Javascript that works for ACTION TWO  on the Podcast hostpage refuses to work on the Grammar Captive mainpage.

if (status === 'success') {
    var aside_height = $('aside').height();
    $('#main').css('min-height', aside_height);
    $('#pagn').show();
}

This, no matter the placement or alteration. Adding the property-value pair 'overflow-y' : 'scroll' achieves nothing.

$('#main').css({'min-height':aside_height,'overflow-y':'scroll'});

Any ideas?

Roddy

 

 

 

 

 

Edited March 4, 2018 by iwato

[dsonesuk]

All this can be done with css display: flex.

You would have to create code, to loop through the 3 columns, identity which is highest and apply the highest height to all or just the two lower columns. You may want to consider .outerHeight(), as this allows for padding, margins (optional) AND borders.

[iwato]

Thank you, Dsonesuk, for your advice regarding a proper approach to take in remedying my problem of digital toilet paper.  For the moment, however, I have solved the problem by rethinking how the paper functions in a smartphone environment where most people are likely to view Grammar Captive, anyway.  The cost of implementation simply does not match the benefit of outcome at this early stage of development.  I must move on toward production, and performance measurement must take priority over site appearance at this time.

Roddy