Divided screen showcasing one movable panel

I am currently working on a design where I have a container with a specified maximum height. Inside this container, there are two separate divs. One of these divs (the footer) has a fixed height of 55px, while the other is a scrollable div that adjusts its height based on its content.

<div class="parent">
  <div class="wrapper">
    <div class="panel">
      Scrollable Div
    </div>
    <div class="fixed">
      Fixed footer
    </div>
  </div>
</div>

The height of the scrollable div should always match its content. However, if it exceeds the maximum height set for the wrapper (

.wrapper has a max-height of 300px
), it should only occupy the remaining space below the fixed footer without affecting its position.

Unfortunately, my current layout does not meet these requirements as expected.

In my implementation, when new content is added to the scrollable div, the footer protrudes outside the wrapper. Ideally, the footer should stay at the bottom of the wrapper without being cut off, and the scrollable div should expand upwards.

It's important to note that I want to avoid using position: fixed or absolute in this scenario.

Given that this is intended for a mobile application, fixed positioning often causes several issues.

You can view my progress so far in this JS Fiddle: fiddle

htmlcss

Answer №1

apply a maximum height of 300 pixels to the .panel element instead

Check out the JS Fiddle example here

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

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

javascriptangularjstwitter-bootstrapcssangularjs-ng-repeat

Leveraging Ajax for establishing session and displaying outputs

Trying my best to make this work with AJAX, but it's a new concept for me. So bear with me as I figure this out... I've posted a couple of questions about resolving the issue at hand and we've made progress. However, a new challenge has pre ...

javascriptphpjqueryhtmlajax

Troubleshooting the issue with UI-Router AngularJS controller not functioning properly in a

Trying to grasp the ins and outs of UI-Router in conjunction with Angular has proven to be quite challenging for me. In my setup, there's an index: <body> <div ui-view></div> <!--Location of file holding app--> <scri ...

javascripthtmlangularjsangular-ui-router

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

javascripthtmlsvgjquery-svglibrsvg

Toggle nested menu within another submenu

Looking for help with toggling menu items? I currently have a menu setup with 3 icons where clicking on an icon opens the dropdown-mobile UL under it. The goal is to toggle different submenu items when 'Main menu item' or 'sub-menu item&apos ...

jqueryhtmlmenutoggleslidetoggle

Stop the css animation from playing

I created a slideshow using HTML and CSS, and I'm looking to implement a feature where the slideshow pauses when my mouse hovers over it. I attempted to achieve this by using -webkit-animation-play-state: paused;, but unfortunately, it only pauses one ...

htmlcssanimationslideshow

Combining Multiple Partial Views with Their Respective View Models in ASP.NET MVC: A Step-by-Step Guide

I am working on a view named Register where I include other views using @Html.Partial("ViewName"). I am curious about how to call other ViewModels from the partial views within this main view. While I know that each ViewModel with its fields can be declar ...

c#htmlasp.netasp.net-mvc

CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any fr ...

htmlcss

Trick to Use Custom Fonts in Email Clients with CSS and HTML

With certain email clients not supporting web fonts, most solutions involve using a backup font like Arial that is compatible with the client. However, the issue is that the default web font is needed specifically because it is a barcode font. Are there a ...

htmlcssoutlookhtml-emailwebfonts

Ways to update the background hue of a selected Navigation Tab?

One of the challenges I am facing in my React Project is with the Navigation Tab from material-ui. The issue I encounter is that the active tab should have a background color, and then revert to its original color when not active. However, the transparency ...

cssreactjsmaterial-ui

Tap and conceal feature on a mobile website

I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...

javascriptjquerycss

Eliminate the grey border located above the arrow in the Bootstrap tooltip

Is there a reason why a thin border is showing up on all of my Bootstrap tooltips? I have looked extensively for answers but have not been able to find anyone else having the same issue. This border appears consistently in all of our MVC projects, and we h ...

csstwitter-bootstrapmodel-view-controller

Encountered a data retrieval issue while accessing my post.html.erb file

Unfortunately, I am unable to provide specific details about my issue as I am unsure of the exact cause. /db/migrate/XXXXXX_create_restaurants.rb ... t.string :restaurant_name t.string :restaurant_addr ... /app/controllers/restaurant.rb def post @res ...

htmlmysqlruby-on-rails

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Here is the structure of my Vue component: Vue.component('list-category', { template: "#lc", props: ['data', 'category', 'search'], data() { return { open: false, categoryId: this.category ...

javascriptcssvue.jsvuejs2vue-component

What is the process for creating a two-column table in Angular?

Currently, I have an Angular template code that displays the header on the left and data on the right in a top to bottom layout. <div class="panel-body"> <table class="table table-striped"> <tr ng-repeat="f in fields"&g ...

htmlcssangularjstwitter-bootstrap

A convenient npm tool for combining HTML files into a single document

I have a specific need to combine several HTML files into a single file. This involves eliminating the HTML tags and HEAD tag from each file, then merging them into one file with only one set of HTML and HEAD tags. I am wondering if there are any existing ...

htmlnode.jsnpm

Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider? <div class="col-12 box-container"> <div class=" ...

c#htmlcss.net

Running a Node.js child process upon clicking an HTML button

I need to create a basic webpage where clicking a button will open the command prompt. This is my goal. Below are the HTML and Node.js code snippets. test.html <html> <head> </head> <body> <p>guru</p> <form a ...

htmlnode.jsreactjs

Issues arise when attempting to implement a basic quiz using jQuery or JavaScript

I’ve created a quick quiz to determine how many correct answers a person gets when they click the 'submit' button. However, it keeps showing zero as the result. Can someone please assist me? $(document).ready(function(){ $('button' ...

javascriptjqueryhtml

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

javascriptjqueryhtmlcss