Content that is partially concealed when scrolling through div elements

I have been searching high and low for similar questions, but to no avail. So, I am laying out my problem here in the hopes that you could guide me on what I might be doing wrong and how to rectify it. The scenario I am trying to achieve is having two divs side by side, each using 100% of height and width. One of the divs should be scrollable while the other has a stack of divs with the last one also being scrollable.

A visual representation of this scenario can make things clearer:

The blue divs are the ones that need to be scrollable, while the height of the red divs is unknown. I managed to partially achieve this setup, but the issue is that when the content of the last div is scrolled, it gets pushed down out of view at the same rate as the combined height of the red divs. This means that the user scrolling the blue div won't be able to see all of its contents. How can I solve this conundrum? You can replicate this behavior on the following Fiddle: http://jsfiddle.net/d3dNG/3/ Thank you in advance for any feedback provided.

Here is the HTML code snippet:

<div class="container">
    <div id="left">
        Left (first)<br />
        [...]Left<br />
        Left (last)<br />
    </div>
    <div id="right">
        <div id="header1">Header 1</div>
        <div id="header2">Header 2</div>
        <div id="header3">Header 3</div>
        <div id="rightContent">
            Right (first)<br />
            Right<br />
            [...]
            Right (last)<br />
       </div>
   </div>
</div>

And here is the CSS styling applied:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.container {
    height: 100%;
    width: 100%;
    background: pink;
}

#left {
    float: left;
    width: 100px;
    height: 100%;
    overflow-y: auto;
    background: gold;
}

#right {
    height: 100%;
    width: 100%;
}

#rightContent {
    height: 100%;
    overflow-y: auto;
    background: lime;
}

Answer №1

It's important to consider the size of #header1 when working with it in your code. One approach is to use JavaScript or jQuery to handle this variable size.

(Remember, ids should be unique on a page, and in this case, #header1 appears multiple times)

Here is the updated HTML structure:

<div class="headParent">
     <div class="header1">Header 1</div>
     <div class="header1">Header 2</div>
     <div class="header1">Header 3</div>
</div>

Below is a snippet of jQuery code for handling the sizing:

function adjustSize() {
    var hHeight = $('.headParent').height(); // gets the height of `#header1`'s parent
    var remainHeight = $('#rightContent').height() - hHeight; // subtracts parent height from `#rightContent`

    $('#rightContent').css({height: remainHeight});
}

adjustSize();

For a live demonstration, check out this fiddle: Demo

If there are additional instances of .header1, the #rightContent will still adjust correctly to accommodate the content. Check out the expanded example here: Even once there is more

Answer №2

Give this a shot:

HTML

<div class="container">
    <div id="left">
        Left side (first)<br />
        [...]More on the left<br />
        The last on the left<br />
</div>
<div id="rightOne">
    <div id="header1">Header 1</div>
    <div id="header1">Header 2</div>
    <div id="header1">Header 3</div>
</div>
<div id="rightTwo">
    <div id="rightContent">
        Right side (first)<br />
        More on the right<br />
        [...]
        The last on the right<br />
    </div>
</div>
</div>

CSS

#rightOne {
    height: 16%;
    width: 100%;
}

#rightTwo {
    height: 84%;
    width: 100%;
}

I've made updates to your fiddle: http://jsfiddle.net/d3dNG/4/

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 retrieving information from the input field

I'm having trouble retrieving the user's input from the input field, can someone assist me with this issue? I can't seem to identify what the problem is here. var ftemp = document.getElementById("Farenheit").value; <td> <i ...

Deleting content in a text area when specific text is entered

Is there a way to clear the textarea value if I type in <br>? The code I have right now is shown below. I understand that this may seem like an odd request, but I am experimenting with a typing effect. function eraseText() { document.getElemen ...

Tips on deactivating automatic email client-specific content (such as Gmail or Outlook) in your emails

I have inserted the following code => <span style="font-size:12px;"><b>Name:</b></span></font><font size="1"><span style="font-size:12px;">Pratik</span> However, when viewed in a browser (such as Outlook ...

When the child of li is clicked instead

Below is a list I have: <ul id="orderlist"> <li id="2"> <span class="pull-right value">Ready</span> <img src="" class="img-responsive"> Filet Mignon <small>2 servings</small> <small ...

php receiving the selected value from a dropdown list in the action

I am aiming to retrieve two drop-down values and then 1. pass them to the `action` function and 2. send them to the next `.php` page using `$_POST`. Essentially, I want to choose the php `action` with a drop-down menu. Where am I going wrong? When I selec ...

Making sure that a footer div is consistently positioned at the bottom of the container div, regardless of the dimensions of the other elements

I am facing a challenge with a container div which has child elements. <div class='wrapper'> <div class='content'></div> <div class='footer'></div> </div> The height o ...

What is causing the data in the hierarchy table to be invisible?

I am attempting to build a hierarchical table using Vue.js as the foundation. However, I want the table to remain hidden with no data displayed. The issue seems to be within this section of code: <tr v-if="item.childrenVisible" v-for="chi ...

Use a PHP form to send an email with HTML formatting, rather than plain text

I am facing an issue with sending emails from a web form. The received email needs to be displayed as HTML and not text. function createMailBodyLine ( $title, $value ) { $value = nl2br(htmlspecialchars($value)); return "<tr> ...

Failed validation for Angular file upload

I attempted to create a file validator in the front end using Angular. The validator is quite straightforward. I added a function onFileChange(event) to the file input form to extract properties from the uploaded file. I then implemented a filter - only al ...

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

Utilize the CSS exclusively for the specific element

nav ul { } nav ul li { margin-left: 7px; } nav.ul li a, a:link, a:visited { float: left; padding: 7px; margin-left: 15px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul li a:hover { } The styling above is ...

Detect IE 9 and IE 10 with jQuery

My jQuery code works well in Chrome and Mozilla but not in IE. if ($("html").hasClass("ie")) { $(function(){ $('.green-column, .red-column, .grey-column').click(function() { alert($(this).attr("data-type")); ...

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

designing alternating rows within a table

Can I apply styles to alternating rows in an HTML table using only element hierarchy selectors and avoiding style names? I am tasked with styling the HTML output generated by a server component, which does not include styles for alternate rows. While I co ...

Clicking the submit button on a PHP contact form will prompt the opening of

My project involves creating a custom contact form using html5 and php. I have successfully designed the form as per my requirements and now I am working on validating the entered values in the fields. To check if everything is functioning correctly, I am ...

What is the best way to target elements that have the contentEditable attribute set to true using CSS?

Can someone help me style table cells that have contentEditable set to "true"? I've tried various CSS selectors like td[contenteditable], td[contenteditable=true], and td[contenteditable="true"], but none seem to work. Is there a specific selector for ...

jQuery is malfunctioning following an AJAX request

Can anyone help me fix an issue with my jQuery code? I have a hidden div that should be shown when the mouse hovers over a sibling element. However, it seems like after my AJAX function is executed, the jQuery stops working. <div class="parent"> ...

What are the different ways to customize the indicator color of React Material UI Tabs using hex

Just got my hands on this amazing Material UI component <Tabs textColor="primary" indicatorColor="primary" > <Tab label="All Issues"/> </Tabs> The documentation states that indicatorColor and textColor can only be set to ' ...