Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the container. To make it scrollable, I utilized overflow-y:scroll. Things were going well up to this point.

My next goal was to add a fixed footer at the bottom of the container. This footer would feature a white-to-transparent gradient and include a button to close the menu popup. Unfortunately, my initial approach failed, so I resorted to placing the footer inside another container on top of the popup. While the design now looks great, the background menu is no longer scrollable.

There must be a better solution... How can I position the close button container at the bottom of the menu while keeping the scroll functionality intact?

Check out the jsFiddle example here...

htmlcssscrollpopupcss-position

Answer №1

The button container located at the bottom is currently covering the scrollable container, causing any attempt to scroll the text to actually scroll within the bottom container itself. To demonstrate what you are aiming for, I have created a JS fiddle with an example.

https://jsfiddle.net/9cpv5th7/

body {
    background: #f1f1f1;
}

.box {
    width: 100%;
    height: 100%;
    max-width: 80%;
    max-height: 80%;
    left: 0;
    top: 0;
    margin: 5% 10%;
    position: fixed;
    background: #fff;
    overflow: hidden;
}

.top-section {
    height: 20%;
    background: #2c3e50;
}

.scroll-section {
    height: 70%;
    overflow-y: scroll;
}

.bottom-section {
    height:  10%;
}

.button {
    background: #2c3e50;
    height: 30px;
    width: 100px;
    margin: auto;
    text-align: center;
}

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

Storing information in the DOM: Choosing between Element value and data attribute

When it comes to storing values in a DOM element, we have options like using the data attribute. For example, $("#abc").data("item", 1) can be used to store values and then retrieve them with $("#abc").data("item"). However, I recently discovered that th ...

javascriptjqueryhtml

Implementing JavaScript functionality based on a specific body class

Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has <body class="category-type-plp"> How can I target my script to work specifically for "category-type-plp"? plpSpaceRemove: fun ...

javascripthtmlcss

Setting the position of the center to be relative inside a table cell

I need help with centering a +/- animation within my table rows to create an accordion toggle effect for revealing more information. Despite finding a nice looking animation, I'm struggling to position it correctly within the td element in my code. He ...

htmlcsscss-positionaccordion

Leveraging the Power of CSS in Your Express Applications

Struggling to make my CSS links functional while working on localhost. Currently, when I view Index.html on my server, it displays as plain text without any styling. Even after trying the express middleware, the CSS files are still not being served, result ...

javascripthtmlcssnode.jsexpress

The process of transmitting messages back and forth between a popup script and a content script

I am in the process of developing a Chrome extension that involves sending data requests from a popup script to a content script (via a background script), analyzing the request on the content script, and then sending back a response (again through the bac ...

javascriptjqueryhtmlgoogle-chrome-extension

Optimal approaches for managing form processing duties

What is the most effective approach to handle form processing? In my situation, I typically follow these steps: If the user has not submitted the form, Display the form Otherwise, If there are any form errors, Show error messages Display the form ...

phphtmlforms

Storing dropdown selection as a variable in a PHP Ajax form

I have created a PHP form that allows the user to select an option from a dropdown menu in order to view a specific data set. The data is refreshed on the screen using an AJAX call and I am utilizing the 'html' datatype to update the output withi ...

phphtmlajax

Exploring jQuery's parent selector for traversing the DOM

I am currently working with an array that inserts articles into my website. I have a specific requirement where, upon clicking the title (h3), I need to display more information based on the article's index. To achieve this, I believe I should travers ...

javascriptjqueryhtml

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

For my Sharepoint 2010 application, I have been utilizing jQuery to handle most events on the client-side. However, when it comes to saving data to the Sharepoint list and generating a PDF file with that data, I need to switch to server-side processing usi ...

c#jqueryhtmlsharepoint-2010

Explore the latest update in the AngularJS single page application that introduces a new feature specifically designed for the initial login

Our AngularJS single page application has a new feature that we are ready to launch for customer use. We want to inform the logged in user about this new feature so they can start using it. We are looking for a small animated information symbol with a too ...

javascriptangularjshtmltwitter-bootstrapangular-ui-bootstrap

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

A division of text is colliding with a division that holds a list with no particular

Hello everyone, I am new to HTML/CSS and I am facing an issue that I believe can be easily resolved. Currently, my code has four sections, with the last three displaying as expected in a consecutive manner. However, the second section is overlapping on t ...

htmlcss

Align the image and text vertically within the <ul> tag

I'm trying to center-align the items in the navbar. https://i.stack.imgur.com/FmDYS.png Although the image looks centered, I believe it's because its size is stretching the navbar. How can I achieve this without changing the size of the picture ...

htmlcsshtml-lists

Issue with Bootstrap contact form functionality in PHP not working

I have experience in coding HTML and PHP, but unfortunately, [email protected] (mail address) is still unable to receive emails from my website (http://cloudsblack.info/) and when I click the submit button, it leads to a blank page (http://cloudsblack.info ...

phphtmltwitter-bootstrapcontact-form

Ways to dynamically assign a class to a single element within a group of identical elements

I have three identical items in the DOM. Specifically, I am referring to a moving line <span class="caret"></span> <ul> <li class="nav-item-1"> <a href="#">ITEM 1</a> <span class="caret"></span> ...

javascriptjqueryhtmlcss

Enhance mix-blend mode or filtering effects in SCSS using an SVG component in VueJS

I am currently developing a fixed navbar at the top of a webpage with several SVGs inside anchor tags. I want the SVGs to appear black when displayed over lighter colored divs (other Vue components) and white when displayed over darker colored ones. The ba ...

cssvue.jssassresponsivemix-blend-mode

Organize and conceal identical columns in an Angular 4+ table

My goal is to organize the table by both name and first name. If there are any duplicate entries, I plan to keep just one line visible while adding an accordion feature to display the duplicates in a collapsed manner. Included below is the TS and HTML ...

html

Utilizing dynamic attributes in design with bootstrap and CSS. Our capabilities are limited in executing actions through selenium

https://i.stack.imgur.com/Bwbgh.jpg Upon reviewing the code snippet above, I have made an attempt to locate elements and execute actions in Selenium. Actions action = new Actions(driver); Initiating Control on Elements WebElement we = driver. ...

cssselenium

What is the reason for Safari 13 not displaying the outline during focus when a transition is applied?

In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...

csssafarifocuscss-transitionsoutline