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

Question

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...

html css scroll popup css-position

Answer 1

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;
}

Answer 2

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;
}

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

Answer №1

Similar questions

Click to reveal additional images once the "show more" button is pressed

Can the <br> tag affect the layout in terms of horizontal space?

On a Samsung tablet with Moodle, the body background image is set to display at the top

Setting images on various screens with Bootstrap can be achieved by utilizing the responsive class utilities

Safari not fully supporting CSS translate functionality

Creating a non-editable form or text field upon clicking the Submit button

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Dilemma arises from conflicting javascript codes

Animate hovering over a specific element within a group of similar elements using jQuery

What is the best way to create a more compact Select component in React?

How can you display a message if a variable is not found in a MySQL table?

Display Button and Div when Event occurs in Asp.net core using Razor Pages

How to perfectly center an image vertically within a div using CSS

Run a Javascript function two seconds after initiating

Guide to importing external CSS styles into Angular 2 using the require method

Ways to apply CSS in jQuery using various combinators

Importing Data from Wordpress JSON Feed to Create a Table

Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

What is the best way to conceal a broken image icon without sacrificing all of the stylesheet?

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?