I need to divide a div container into two vertical sections, one occupying 60% of the space and the other 40%.
The top div (60%) should always be visible, while the bottom div (40%) should be scrollable if it exceeds its limit.
I have tried different approaches, including the algorithm in this post, but I am still unable to achieve the desired outcome.
For reference, I will provide an illustration:
To achieve the desired layout, you can utilize the absolute positioning method for each section and adjust their placement using the top and bottom properties accordingly.
In this scenario, the upper section remains fixed at the top of the page with the CSS rule top: 0;. Meanwhile, the top property value of the #bottom element is specified as 60%, which corresponds to the height of the #top element. Consequently, setting top: 60%; ensures that the #bottom segment sits below the #top portion.
For scroll functionality within the #bottom area, you have the option of incorporating the overflow-y or overflow property with a value of auto.
11.1. The ‘overflow’, ‘overflow-x’ and ‘overflow-y’ properties
The purpose of these properties is to determine whether content gets clipped when it extends beyond the boundaries of the element's content area. While
overflow-xdeals with clipping on the left and right sides,overflow-yaddresses overflow issues at the top and bottom edges. A shorthand representation of both properties combined is denoted by theoverflowattribute. If only one keyword is provided, it applies to bothoverflow-xandoverflow-y.
autoThe precise behavior of the ‘auto’ value depends on the User Agent (UA), but generally prompts the implementation of a scrolling mechanism for overflowing containers.
#top {
position: absolute;
top: 0;
height: 60%;
width: 100%;
}
#bottom {
position: absolute;
top: 60%;
bottom: 0;
width: 100%;
overflow-y: auto;
}
To demonstrate how your HTML should look, consider the following example:
<div class="ColumnContainer">
<div class="FixedItem">
Fixed
</div>
<div class="ScrollContainer">
<div class="ScrollContent">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</div>
The main point to note is the CSS styling:
.ColumnContainer {
position:relative;
}
.ScrollContainer {
position:relative;
height:200px; /* must set fixed height */
overflow:auto;
}
By assigning a fixed height to the container and having all content within a single child element, scrolling will be triggered when it exceeds the specified height.
I am facing an issue with downloading a PDF file sent from the backend. Upon receiving a blob response, I notice that when I download and view the file, the sheets are empty, matching the expected number of sheets. Could this be a coding problem? Current ...
Trying to figure out how to create an HTML element similar to this: <option value="Replaced">by this</option> For example: <option value="ThisIsTest">ThisIsTest</option> UPDATE Using jQuery, I need to achieve something like thi ...
I am currently working on a HTML5 Canvas and JavaScript game. Initially, the frames per second (fps) are decent, but as the game progresses, the fps starts decreasing. It usually starts at around 45 fps and drops to only 5 fps. Here is my current game loo ...
Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...
Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is neces ...
Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...
I have been attempting to use the same code for multiple modules on this page, but none of the methods I've tried seem to be effective. I want to avoid endlessly duplicating existing code. document.addEventListener('DOMContentLoaded', fun ...
On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...
I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...
Presently focused on working with Selenium WebDriver and Java. I am attempting to pick an option from a date picker form. When trying to select the month from the dropdown of the date picker, an error is displayed stating Unable to locate element: {"method ...
I am currently working on developing a metronome as a hobby using JavaScript/HTML5 with the intention of turning it into a FirefoxOS app. One issue I've encountered is Jitter, which is unacceptable for Metronomes. As JavaScript is single-threaded and ...
On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...
I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...
Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...
My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...
My website is currently in development and can be accessed at: The top navigation bar on the homepage functions properly across all browsers. However, there are three sections with dropdown submenus - About Us, Training, and Careers. These dropdown submen ...
I've tried searching for it online, but unfortunately, I couldn't find any helpful results. What I'm attempting to achieve is a mixin that can lighten or darken a color based on a given percentage. If the percentage is less than 0, then I w ...
I am looking to dynamically change the content displayed inside a modal based on the button that is clicked. For example, clicking button one will only show the div with the class 'one' while hiding the others. $('#exampleModalCenter&a ...
Trying my best to explain this clearly. What I have is a data-attribute that holds a large amount of data. In this case, I need to extract each individual basket product ID and display them as separate strings. The challenging part for me is locating thi ...
I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...