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.
There seems to be an issue with GIFs not loading on mobile devices, even though they are implemented as mobile-ready. <video src="/wp-content/uploads/2017/09/5.mp4" preload="metadata" autoplay="autoplay" loop="loop" muted="muted" controls="controls" ...
Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...
I'm creating an .html document for conducting a complete system check and confirming various aspects of its functionality. In this page, there is a table within a form structure where each row represents a step in the system verification process (e.g. ...
My goal is to check if the document is NOT scrollable using this code snippet: $el = document.documentElement const noscroll = $el.clientHeight === $el.scrollHeight // false console.log($el.clientHeight) // 977 console.log($el.scrollHeight) // 991 consol ...
I am attempting to place an image within a frame. DESIGN #wrapper { border: 2px solid black; width: 600px; height: 400px; overflow:hidden; position: relative; display: inline-block; } img{ p ...
I've attempted various methods to align the links vertically in the left-most column, but without success. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/adRuz/112/ .box { background: #E8E8E8; border-radius: 8px ...
My Google PageSpeed Insights report suggests that I should place my CSS below the fold. However, Bootstrap is being used as my templating plugin. I am contemplating printing bootstrap.min.css inline on my homepage, but I hesitate because it may lead to i ...
There is a strange issue I'm facing where some borders on identical divs are not showing up. I have spent hours trying to troubleshoot this problem, and it seems like zooming in or out sometimes makes the border appear or disappear. My hunch is that i ...
Font Awesome has a special spin animation for elements that have the class fa-spin. Taking a closer look at the CSS code, you can see that the spinning effect is achieved through keyframes under the same name, fa-spin. Instead of creating a new animation ...
I have been working on an application to display various events, but I am encountering an issue. Whenever I load the webpage, it appears empty and the console throws an error saying 'Can't bind to 'ngForEvent' since it isn't a know ...
I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...
Attempting to navigate the world of CSS as a newbie, I find myself struggling with creating tabs. Our current tab setup can be viewed here, but unfortunately, these tabs are created using an unattractive <table> tag. Below is the code responsible fo ...
In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...
I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...
Having trouble checking a checkbox inside a table using Selenium Webdriver in Java? Even with version 2.52.0 of Selenium, the element not found error persists across different web browsers. The iFrame seems to be correct as I can interact with other compon ...
I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...
Bar.html: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="customStyle.css" /> </head> <body> The text formatting is spot on. Unfortunately, the following image should be centered, but it's off ...
I'm currently developing a web application and facing the task of converting an HTML page, which contains multiple tables and datatables, to a PDF format. To achieve this, I've chosen to utilize the library pdfmake. Below is the script that I ha ...
Developing a menu for my website has been occupying my time lately, sparking numerous inquiries about its functionality. Essentially, I aim to create a menu with a select option containing all my projects. By clicking on either the modify or delete button, ...
After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues. * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .container { ...